Ajuster une image réactive aux tailles d'écrans

Bonjour à tous,

Je crée un site internet, où la page d'accueil est une image mappée, avec des zones réactives cliquables.

Mon objectif est que l'image s'ajuste automatiquement aux différentes tailles d'écran des internautes qui surferont sur le site. J'ai remplacé les valeurs des attributs widht et eight par des pourcentages (%) au lieu des pixels habituels, afin que l'image s'ajuste aux différentes taille d'écrans. Après vérification dans plusieurs navigateurs, cela fonctionne, mais ce sont les zones réactives associées qui ne correspondent plus à l'image.

Donc, ma question est : comment, en utilisant quel code, puis je faire en sorte que les zones réactives s'ajustent elles aussi à l'image redimensionnée ?

Dans l'attente de vos réponses, merci d'avance.

Hi,

Il faut probablement que tu ai un modèle source avec une échelle par défaut, et que tu garde la trace de ce modèle source, et que tu modifie le modèle qui s’affiche, après application d’une fonction de mise à l’échelle, une fonction du modèle source, qui lui n’est pas affiché et n’est pas modifié.

Pour être plus concret, un dégrossi des étapes :

* Au chargement de la page, tu lis la taille de l’image, hors mise à l’échelle et tu stock ces dimensions dans des variables ou des objets.
* Tu lis les coordonnées de tes éléments AREA, et tu les stock également dans des variables ou des objets.
* Quand ces valeurs sont stockées, tu ne les modifie plus.
* Quand la page change de taille, tu met ton image à l’échelle, et tu stock le facteur d’échelle, dans une variable, qui elle, changera chaque fois que la taille de la page changera.
* Tu lis les coordonnées de tes éléments AREA, que tu as stocké dans des variables ou objets.
* Tu met à jours les coordonnées des éléments AREA dans le DOM, après leur avoir appliqué le facteur d’échelle.

P.S. Pourquoi il n’y a pas de balises pour les listes sur ce forum ?
Modifié par hibou57 (13 Mar 2013 - 20:22)