the gimp 300x224 Une image map en HTML sous Gimp

Comment réaliser une image cliquable sur un site internet, le tout en HTML et sans avoir recours à un code complexe. On défini dans différentes zones sur une image sur lesquelles on place un lien hypertexte classique.

Dans l’exemple, je vais adapter un graphe au format JPEG pour pouvoir avoir un lien sur chacun des noeuds.

Pré-requis

Avoir le logiciel libre Gimp d’installé. Dans l’exemple, je me suis basé sur Gimp dans sa version pour Windows :http://www.gimp.org/downloads/

Références

http://enacit1.epfl.ch/exercices_html/ex_imagemaps.html
http://docs.gimp.org/2.6/fr/plug-in-imagemap.html

Création de la map

Pour commencer, ouvrez l’image avec Gimp (clic droit, Edit with Gimp)
0b36 gimp ouvrir Une image map en HTML sous Gimp

Une fois l’image ouverte, sélectionnez Filtre, Web puis Image cliquable Web
c48b gimp image cliquable Une image map en HTML sous Gimp

Nous nous retrouvons alors avec une nouvelle fenêtre qui contient l’image ainsi qu’une zone qui vous indiquera toutes les zones que vous avez déjà définies.
Pour créer une nouvelle zone, utilisez un des outils de sélection sur la gauche puis tracez simplement votre zone (un clic pour le début, glisser puis un clic pour la fin).
8308 gimp selection Une image map en HTML sous Gimp

Dans la fenêtre qui apparaît, entrez la cible du lien (et éventuellement le cadre et le texte alternatif).
Vous pouvez remarquer la présence de deux autres onglets, un pour modifier l’emplacement de votre cadre et un autre pour définir des éléments javascript.
2738 gimp lien Une image map en HTML sous Gimp

Une fois terminé, sauvegardez votre travail. Il sera enregistré sous forme d’un fichier .map qui est rien d’autre qu’un fichier texte.

Intégration de la map dans une page

Directement dans le code source HTML, copiez/collez le contenu du fichier .map généré par Gimp entre les balises body, à l’emplacement exact que vous souhaitez. Il contient à la fois l’image et le mapping.
Exemple :

<img src="schema_virtualdatabase.bmp" width="9727" height="635" 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:Administrateur -->
<area shape="rect" coords="656,8,788,50" target="bas" href="dtd.php?id=cjdbc" />
<area shape="rect" coords="619,102,819,148" target="bas" href="dtd.php?id=virtualdatabase" />
<area shape="rect" coords="141,201,283,239" target="bas" href="dtd.php?id=distribution" />
<area shape="rect" coords="383,201,514,244" target="bas" href="dtd.php?id=monitoring" />
<area shape="rect" coords="553,201,658,241" target="bas" href="dtd.php?id=backup" />
<area shape="rect" coords="698,199,976,242" href="dtd.php?id=authentificationmanager" />

Prenez bien garde à nommer correctement vos maps dans l’attribut « name » si vous en avez plusieurs dans la même page.

A propos de Olivier Olejniczak

Olivier Olejniczak a rédigé 424 articles sur ce blog..

Co-Fondateur du site SynerGeek.fr Passionné d'informatique, je m'intéresse plus particulièrement aux technologies de virtualisation et de stockage. J'apprécie la liberté et la quasi-absence de frontières à mon imagination qu'offre l'OpenSource et Linux. Professionnellement, je travaille exclusivement avec les outils Microsoft. Les pieds bien sur terre et ancrés dans le quotidien de l'entreprise, j'aime faire partager mes découvertes et contribuer à un meilleur usage des technologies. Vous aussi, rejoignez-nous sur Synergeek et partagez votre expérience!