[JS]Responsive <area> dynamique

Ce qui ne va pas

Il peut nous arriver d'avoir besoin qu'une image, sur laquelle une <map> est associée, soit responsive.

On sait que l'attribut coords, des <area>, défini les coordonnées de la forme décrite par l'attribut shape et permet ainsi de positionner et dimensionner les zones interactives d'une image.

Seulement voilà les valeurs sont exprimées en pixels CSS donc ne peuvent plus forcément s'appliquer si l'image, dont elles représentent les zones d'intérêt, est elle « responsive ».

La solution est donc de recalculer ces coordonnées dynamiquement en fonction de la taille de l'image référente.

<area> en action

Redimensionnez la fenêtre du navigateur pour observer le réajustement des zones.

les zones

Les overlays affichés sont recalculés, au redimensionnement, pour tenir compte des nouvelles coordonnées des <area>.

Code function

Observations

• Il faut que les zones soient définies par rapport à l'image originale non redimensionnée pour que cela ait de l’intérêt. Dans l'exemple présenté, la <map> est calculée, volontairement, sur une image surdimensionnée de 1920 x 1080.
• Si vous ne voulez pas que la <map> soit recalculée, il suffit de mettre un attribut noresize à celle-ci.
• Lors d'un redimensionnement, si le rapport vertical/horizontal n'est plus le même que sur l'image originale, les zones circulaires restent circulaire et ne se déforment pas en ellipse. Ce n'est pas le cas pour les rectangles et les polygones.