Éditeur d'imageMap 1.8

Allez à l'Éditeur d'imageMap par le menu Plugins.

Si le menu Plugins est vide, ou ne contient pas le plugin :

Cliquez l'icone plugin version pour accéder à l'aide en ligne.

Boutons de commande

	Sélectionne le fichier de l'image destinée à servir en image map.		Importe une liste de liens : fichier texte tabulé listant pour chaque zone sensible : le type de surface et ses coordonnées, le lien associé et le texte présent en balise alt.
	Enregistre les areas et les liens créés dans une liste réutilisable ultérieurement.		Exporte dans un fichier le code HTML de l'image map.
	option target des liens href : aucun, _blank, _parent, _self ou _top.		option d'ajout d'un attribut title de même contenu que celui spécifié en alt.
	Efface l'écran.		Boutons de commande des lignes : les doubles flèches permettent de changer l'ordre des areas, du premier au dernier plan. le + permet d'ajouter une ligne après la ligne sélectionnée; le - supprime la ligne sélectionnée.

Gestion des lignes

Vous pouvez saisir directement la table des liens après avoir sélectionné l'image au moyen du bouton « Image Map ».
Sélectionnez un lien de la liste, puis définissez le type de shape, les coordonnées et entrez lien et description dans les champs correspondants.

Définir le type de shape : poly : polygone irrégulier; rect : rectangle; circle : cercle (l'ovale n'est pas possible); default : zone donnant un lien par défaut lorsque aucune area n'a été cliquée.

Saisir les coordonnées d'une area sensible : polygone, rectangle ou cercle.Un polygone se saisit en cliquant tous les angles, un rectangle ou un cercle en cliquant deux angles diamétralement opposés du rectangle incluant l'objet.

Vous pouvez également préparer une table des liens sous Excel en l'enregistrant au format texte seul et en l'important au moyen du bouton « importer table des liens ».
Les 4 rubrique sont dans l'ordre des colonnes de l'éditeur d'imagemap :

• shape : vous pouvez la laisser vide car la valeur par défaut est poly;
• coordonnées : à laisser vide car vous la saisirez avec l'outil de zonage;
• href : le contenu du link html (ou du javascript);
• alt : le commentaire placé en alt (et en title), obligatoire pour l'accessibilité de la page.

Zonage de l'image

Créez autant de lignes que de shapes (zones) à définir; pour chacune, sélectionnez la ligne, définissez la forme choisie si elle est autre que poly et cliquez l'outil de Saisie des coordonnées .

L'image est affichée dans une seconde fenêtre avec les outils suivants :

	palette servant à sélectionner la couleur dans laquelle l'area est affichée sur l'image.
Voir	Permet de visualiser les coordonnées actuellement saisies.
Reprendre	Permet d'initialiser la saisie des coordonnées.
Annuler	Permet de conserver les réglages existants.
OK	Enregistre les coordonnées saisies.

Saisie des coordonnées :

polygone : cliquez un par un les points du contour de la forme. Un tracé vectoriel apparaît progressivement pour visualiser le tracé.

Cercle ou rectangle : 2 clics suffisent ! 2 sommets opposés pour un rectangle ou deux points diamétralement opposés pour un cercle.

Si le réglage convient, cliquez OK sinon cliquez Reprendre.
Sauvegardez le travail au moyen du bouton « exporter liste des liens ».

Génération de l'imagemap

Choissez les options suivantes :

	Cible des liens href : aucun ou _self : dans le même cadre que celui sur lequel il a été cliqué (c'est la valeur par défaut ; _blank : ouvre nouvelle fenêtre ou un nouvel onglet ; _parent : dans le cadre parent ; _top :dans le corps entier de la fenêtre.
	Largeur originelle de l'image map : vous pouvez saisir une largeur différente (en pixels) pour effectuer une mise à l'échelle. Cette largeur est fixe puisque les coordonnées le sont aussi.

Enregistrez l'imagemap au moyen du bouton en choissant un emplacement identique à celui de la page HTML de destination (cohérence des liens).

Quelques rappels sur la balise MAP

L'élément MAP - obligatoirement repéré par un nom - constitue une liste de zones actives (cercles, rectangles ou polygones) pointant chacune sur lien href.

<map name="myMap">
<area shape="rect" coords="0,0,82,126" href="page1.htm" alt="un rectangle">
<area shape="circle" coords="90,58,3" href="page2.htm" alt="un cercle">
<area shape="poly" coords="124,58,8…" href="page3.htm" alt="un polygone">
<area shape="default" href="default.html" alt="lien par défaut">
</map>

L'ordre va du premier au dernier plan ce qui joue pour les zones en recouvrement. Les coordonnées des points définissant les zones se comptent à partir du coin supérieur gauche de l'image.

Affichage de l'image

Balise image classique à laquelle on ajoute l'attribut USEMAP = # +"nom de la MAP".

<img src ="image_map.png" alt="mon image" usemap ="#myMap">