Une image clicable responsive
Cette action facilite la création d'une image clicable et responsive.
{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
- 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}
{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}
<> 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.
