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 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 B-)

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 - Test SPIP4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.1.3