imagemap ~ image clicable responsive

Une image clicable responsive

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

➠ imagemap : imagemap : image clicable responsive DEMO
syntaxe {up imagemap=chemin_image}
<area target="" alt="" title="" href="/" coords="" shape="">
<area target="" alt="" title="" href="/" coords="" shape="">
{/up imagemap}
author LOMART version 1.0 du 10-12-17 license GNU/GPLv3 credit script RWD Image Maps de stowball
  • imagemap: le chemin et nom de l'image
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal

    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.

    carré cercle triangle étoile rectangle

    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.

    carré cercle triangle étoile rectangle

    carré cercle triangle étoile rectangle