imagemap ~ image clicable responsive

Une image clicable responsive

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

➠ imagemap : une image clicable et responsive

Cliquer pour lire la documentation

syntaxe {up imagemap=chemin_image}
< area target="" alt="" title="" href="/" coords="" shape="">;
< area target="" alt="" title="" href="/" coords="" shape="">;
{/up imagemap}
utiliser un générateur en ligne pour définir les zones : www.image-map.net
author LOMART version UP-1.2 du 10-12-17 license GNU/GPLv3 credit script RWD Image Maps de stowball tags image
  • 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écercletriangleétoilerectangle

    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}


    version 2.3 : possibilité de saisir le contenu en mode bbcode pour éviter sa suppression par un éditeur WYSIWYG (JCE, TinyMCE) non configuré
    {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"]
    ... {/up imagemap}
    Il suffit de remplacer les chevrons <> par des crochets [].

    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écercletriangleétoilerectangle

     

    carrécercletriangleétoilerectangle 

    Image au survol (astuce)

    Suite à une demande de JDA sur le forum pour afficher des photos lors du survol des zones, j'ai imaginé cette solution. Mais voyons déjà le résultat.

    carrécercletriangleétoilerectangle
    {up imagemap=images/doc/forme.png | id=demohover | style=border:2px solid red; width:100%}
        [area data-image="/images/actions-demo/imagemap/carre.jpg" alt="carré" title="carré" href="#carre" coords="150,153,18,21" shape="rect"]
        [area data-image="/images/actions-demo/imagemap/cercle.jpg" alt="cercle" title="cercle" href="#cercle" coords="236,86,66" shape="circle"]
        [area data-image="/images/actions-demo/imagemap/triangle.jpg" alt="triangle" title="triangle" href="#triangle" coords="373,22,303,152,440,151" shape="poly"]
        [area data-image="/images/actions-demo/imagemap/etoile.jpg" 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 data-image="/images/actions-demo/imagemap/rectangle.jpg" alt="rectangle" title="rectangle" href="#rectangle" coords="592,23,778,152" shape="rect"]
    {/up imagemap}
    
    {up addcodehead=link | rel=preload | href=/images/actions-demo/imagemap/carre.jpg | as=image}
    {up addcodehead=link | rel=preload | href=/images/actions-demo/imagemap/cercle.jpg | as=image}
    {up addcodehead=link | rel=preload | href=/images/actions-demo/imagemap/triangle.jpg | as=image}
    {up addcodehead=link | rel=preload | href=/images/actions-demo/imagemap/etoile.jpg | as=image}
    {up addcodehead=link | rel=preload | href=/images/actions-demo/imagemap/rectangle.jpg | as=image}
    
    {up html=img | id=imghover | src=images/actions-demo/imagemap/blank.png}
    {up addcsshead=#imghover [position:absolute; display:none;]}
    
    {up addscript | jquery=1}
    $("[name=demohover] area").mouseenter(function(e) {
        $("#imghover").attr("src", $(this).data("image")).show().css({
            left: e.pageX - 150,
            top: e.pageY - 250,
            width: 200
        });
    });
    $("[name=demohover] area").mouseout(function(e) {
        $("#imghover").hide();
    });
    {/up addscript}

    lignes 1 à 7 : le shortcode imagemap

    le shortcode habituel pour déclarer une imagemap avec 2 ajouts :

    • l'option id que l'on utilisera par la suite pour cibler uniquement cette action
    • les images utilisées au survol par chacune des zones dans un attribut data-image

    lignes 9 à 13 : précharger les images

    Pour éviter un temps de latence lors de l'affichage des images, elles sont préchargées à l'aide d'action addcodehead

    ligne 15 et 16

    On ajoute un bloc image qui sera utilisé par le script pour recevoir les images définies dans les data-image.

    J'utilise une action html qui me permet de bien visualiser ses attributs.
    Une image avec l'attribut id = imghover pouvait convenir.

    J'ajoute du CSS avec addcsshead pour définir le positionnement et la visibilité initiale de cette image

    ligne 18 à 29

    le script jQuery qui comporte 2 fonctions :

    • lors de l'entrée de la souris dans une zone de l'imagemap, on affiche l'image définie dans le data-image. Vous pouvez adapter les valeurs left, top et width à votre convenance.
    • lots de la sortie, on rend invisible cette image