Créer et insérer une image cliquable
Article mis en ligne le 13 février 2019
dernière modification le 14 février 2019

par Jean Christophe Villeneuve

Ou comment créer une image cliquable facilement ...

  • on va d’abord créer notre image cliquable avec GIMP en suivant ce tutoriel

https://memo-linux.com/the-gimp-creer-une-zone-cliquable-sur-une-image-en-html/

ce qui nous produit un fichier .map


Attention au redimensionnement éventuel de votre image dans l’article.
L’image doit être à la même taille que celle qui sera affichée.
Si les images des articles ont une taille maximum de 500px, votre image de base ne doit pas dépasser 500px.

  • on va ensuite téléverser l’image qui nous a servi de base dans le dossier /squelettes/images par exemple (dossier à créer si inexistant)
  • on va ensuite ouvrir le fichier .map obtenu pour changer l’url de l’image, c’est à dire que dans la première ligne du fichier .map obtenu qui ressemble à ça
    <img src="[nom_image] (exportée)" width="500" height="106" border="0" usemap="#map" /

    on va remplacer [nom_image] (exportée) par l’adresse de l’image. Dans notre exemple si l’image s’appelle image.png et se trouve donc dans /squelettes/images, ça donne
    URL_du_site/squelettes/images/image.png

  • on va maintenant copier tout le code du fichier .map modifié dans un fichier image_cliquable.html (par exemple) que l’on dépose dans /squelettes/modeles
  • enfin, dans un article on met ce code
    <image_cliquable|>
  • et on admire le fruit de notre travail 😎

Code dans le modèle pour cette image cliquable :

<img src="http://escal.ac-lyon.fr/spip/squelettes/images/bandeau/bandeau_DANE.png" width="500" height="106" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Jean-Christophe Villeneuve -->
<area shape="rect" coords="1,5,330,106"  title="Le site de la DANE de Lyon" href="https://dane.ac-lyon.fr/" target="_blank" />
<area shape="rect" coords="373,4,499,48"  title="Le site de l'Académie de Lyon" href="http://www.education.gouv.fr/" target="_blank" />
<area shape="rect" coords="386,48,499,106" title="Le site de l'Education Nationale" href="http://www.ac-lyon.fr/" target="_blank" />
</map>
qrcode:http://escal.ac-lyon.fr/spip/spip.php?article371