imagemap ~ image clicable responsive

Une image clicable responsive

Cette action facilite la création d'une image clicable et responsive.

Il est souvent bien pratique d'utiliser une image pour indiquer des liens vers d'autres informations.

Si vous survolez l'image ci-dessous, vous pouvez constater que le lien affiché en bas à gauche de votre navigateur change en fonction de la forme survolée.

Etape n°1 : créer le code HTML pour l'image

Pour se faciliter la vie, nous allons utiliser un générateur en ligne : www.image-map.net/

1. on sélectionne l'image sur notre ordinateur ou sur le web
2. on ajoute et dessine les différentes formes clicables
3. on récupère le code HTML

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="/forme.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="carré" title="carré" href="#carre" coords="150,153,18,21" shape="rect">
    <area target="" alt="cercle" title="cercle" href="#cercle" coords="236,86,66" shape="circle">
    <area target="" alt="triangle" title="triangle" href="#triangle" coords="373,22,303,152,440,151" shape="poly">
    <area target="" alt="étoile" title="étoile" href="#etoile" coords="427,73,483,71,502,24,520,71,578,74,532,104,551,152,502,122,456,151,473,103" shape="poly">
    <area target="" alt="rectangle" title="rectangle" href="#rectangle" coords="592,23,778,152" shape="rect">
</map>

Etape n°2 : créer le shortcode UP

Uniquement la partie du code définissant les zones clicables (area) nous intéresse. Elle est surlignée en jaune dans le code complet récupéré sur le générateur en ligne.

Ce code peut-être saisi dans l'éditeur en mode code ou mode WYSIWYG (JCE, TinyMCE). Il sera converti par UP si nécessaire.

Nous l'entourons avec les shortcodes UP. Le paramètre principal est le chemin et le nom de l'image. En option, on peut indiquer une ou des classes ainsi qu'un style pour le bloc parent.

{up imagemap=images/doc/forme.png | style=border:2px solid red; width:100%}
    <area target="" alt="carré" title="carré" href="#carre" coords="150,153,18,21" shape="rect">
    <area target="" alt="cercle" title="cercle" href="#cercle" coords="236,86,66" shape="circle">
    <area target="" alt="triangle" title="triangle" href="#triangle" coords="373,22,303,152,440,151" shape="poly">
    <area target="" alt="étoile" title="étoile" href="#etoile" coords="427,73,483,71,502,24,520,71,578,74,532,104,551,152,502,122,456,151,473,103" shape="poly">
    <area target="" alt="rectangle" title="rectangle" href="#rectangle" coords="592,23,778,152" shape="rect">
{/up imagemap}

C'est fini

Si vous modifier la taille de la fenêtre du navigateur, vous pouvez constater que le lien correspond toujours à la forme survolée. Pour la démonstration, en dehors de la largeur de l'image, les codes pour les 2 images ci-dessous sont identiques.