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)

Une fois l’image ouverte, sélectionnez Filtre, Web puis Image cliquable Web

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

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.

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.