Éditeur d'imageMap 1.6

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

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

  • Vérifiez que le plugin « imageMap.rev » se trouve bien dans le dossier de plugins « htmlstyles_plugins »; sinon placez-le à l'intérieur.
  • Cliquez l'icone « plugin update » plugins en haut à droite de l'écran HTML Styles pour mettre à jour le menu en fonction des plugins installés.
htmlstyles.rev
htmlstyles_plugins
imageMap.rev

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

Boutons de commande
image servant d’image mapSélectionne le fichier de l'image destinée à servir en image map. importer table des liensImporte 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.
exporter table des liensEnregistre les areas et les liens créés dans une liste réutilisable ultérieurement. enregister la liste d’images du lotExporte dans un fichier le code HTML de l'image map.
mode targetoption target des liens href : aucun, _blank, _parent, _self ou _top. placer un titleoption d'ajout d'un attribut title de même contenu que lien spécifié en alt.
effacer toutEfface l'écran. commandes lignes areasBoutons 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;
  • le crayon permet de modifier les cellules manuellement.

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.

popup shadeDé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.
dessin des coordonnées de l’areaSaisir 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 :

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 dessin des coordonnées de l’area.

L'image est affichée dans une seconde fenêtre avec les outils suivants :
palette couleurs areaspalette 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é.

étapes de saisie d’un polygone

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

saisie d’un circle

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 :
mode targetpermet d'associer un target aux liens href : aucun, _blank, _parent, _self ou _top. placer un titlecocher l'option ajoute un attribut title de même contenu que lien spécifié en alt.

Enregistrez l'imagemap au moyen du bouton enregister la liste d’images du lot 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" width="145" height="126" alt="mon image" usemap ="#myMap">
Attributs d'une area (aire)
Attribut Valeurs Description niveau de DTD requis
S=Strict, T=Transitional
F=Frameset.
shape default, rect, circle, poly Forme de l'aire STF
coords coordonnées de l'aire
  1. "rect" : coordonnées du rectangle (x1,y1,x2,y2);
  2. "circ" : coordonnées du centre du cercle et rayon (x,y,rayon du cercle);
  3. "poly" : coordonnées des sommets du polygone (x1,y1,...,xn,yn).
  4. "default" : aucune coordonnée, il s'agit de l'ensemble de l'image.
STF
href URL Url de destination du lien de l'aire STF
nohref néant Précise que l'aire n'a pas de lien (utile pour exclure une aire). Format: nohref (sans valeur associée). STF
alt texte alternate text (obligatoire) STF
target _blank, _parent, _self, _top Cible d'ouverture des liens TF