Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

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

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 :


Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.1.3