Comment rendre une image map responsive
Une image map (carte d’image) est utile quand vous avez une forme inhabituelle et que ses différentes parties doivent mener à des liens différents.
Une forme avec une image map est une excellente base, mais comment l’image map se comporte-t-elle dans une mise en page responsive ?
Une image map fonctionne ainsi : vous avez une image de par exemple 1000x500 et chaque zone de la carte énumère les points qui, reliés, forment cette zone. Mais les points ont des coordonnées en pixels, horizontales et verticales.
Le problème, c’est que sur un appareil de par exemple 600px de large, un point situé à 200px-200px ne se trouve pas au même endroit dans l’image de 1000x500 que dans la même image réduite à 500x250.
Première solution logique => des pourcentages au lieu des pixels... Mais les pourcentages ne fonctionnent pas. Et maintenant ?
La solution est JavaScript, plus précisément un projet appelé Image Map Resizer.
Lien : le projet sur GitHub
Le résultat peut ressembler à ceci :
Le projet a un défaut : le script ne réagit qu’au changement de largeur de l’image.
Si vous devez réduire la hauteur de l’image, le script ne fonctionne pas. Il faudra peut-être écrire un second script qui limite la largeur de l’élément entourant l’image avec la carte – grâce à ce changement, l’image rétrécit et les positions des points de la carte changent...
Une image map fonctionne ainsi : vous avez une image de par exemple 1000x500 et chaque zone de la carte énumère les points qui, reliés, forment cette zone. Mais les points ont des coordonnées en pixels, horizontales et verticales.
Le problème, c’est que sur un appareil de par exemple 600px de large, un point situé à 200px-200px ne se trouve pas au même endroit dans l’image de 1000x500 que dans la même image réduite à 500x250.
Première solution logique => des pourcentages au lieu des pixels... Mais les pourcentages ne fonctionnent pas. Et maintenant ?
La solution est JavaScript, plus précisément un projet appelé Image Map Resizer.
Lien : le projet sur GitHub
Le résultat peut ressembler à ceci :
<script src="../js/imageMapResizer.min.js?v=1.0"></script>
<script>
$(document).ready(function() {
$('map').imageMapResize();
});
</script>
<img src="../img/home/triangle/triangle.png?v=1.1" border="0" width="900" height="668" usemap="#Map" alt="" name="default_map" />
<map name="Map" id="Map">
<area class="area_map_home" data-id="1" alt="texte alternatif : haut" title="haut" href="../top/" shape="poly" coords="226,334,451,0,676,335" />
<area class="area_map_home" data-id="2" alt="texte alternatif : partie gauche" title="partie gauche" href="../left/" shape="poly" coords="2,667,226,336,461,667" />
<area class="area_map_home" data-id="3" alt="texte alternatif : milieu" title="milieu" href="../middle/" shape="poly" coords="229,336,676,335,461,667" />
<area class="area_map_home" data-id="4" alt="texte alternatif : partie droite" title="partie droite" href="../right/" shape="poly" coords="462,665,677,337,898,664" />
</map>
Le projet a un défaut : le script ne réagit qu’au changement de largeur de l’image.
Si vous devez réduire la hauteur de l’image, le script ne fonctionne pas. Il faudra peut-être écrire un second script qui limite la largeur de l’élément entourant l’image avec la carte – grâce à ce changement, l’image rétrécit et les positions des points de la carte changent...