UP-LOMART - 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="">;
OU pour prévenir l'effacement par editeur (remplacer les <> par [])
[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 @license: GNU/GPLv3 @credit: script RWD Image Maps de stowball @tags: image

imagemap: le chemin et nom de l'image

Style CSS

id: id genérée automatiquement par UP
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.

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/

on sélectionne l'image sur notre ordinateur ou sur le web
on ajoute et dessine les différentes formes clicables
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.

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.

{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}