Accueil > SPIP > Navigation > Image Map : Tutoriels HTML > Zones cliquables sur une image (Images Map)

Zones cliquables sur une image (Images Map)

dimanche 15 janvier 2017, par François Daniel Giezendanner

Notez cet article

Sommaire

Préambule

1) Cet article est une copie de l’article :

Zones cliquables sur une image (Images Map)
vendredi 10 juin 2011 par François Daniel Giezendanner
http://icp.ge.ch/sem/cms-spip/spip.php?article1364

2) Le thème développé ici est repris dans l’article « Créer une « Image Réactive » en associant une « Image Map » à une Image » de manière complémentaire.

Introduction

Nous voulons créer dans le champ texte des articles, brèves et rubriques SPIP des images avec plusieurs zones cliquables qui sont autant de liens vers diverses destinations intra et extra site.

Avant de donner des exemples concrets dans SPIP, nous passons rapidement en revue la syntaxe à utiliser de manière nécessaire et suffisante et renvoyons cependant ceux qui veulent plus de détail vers une littérature encore plus détaillée.

Une application de la méthode présentée ici est donnée dans l’article :

Exemple « d’Image Map » et de « jump menu » avec une carte des CO du canton de Genève

Carte - map : Images et images réactives dans une page Web

L’image est affichée avec la balise <IMG> et les zones réactives sur cette image sont définies avec la balise <MAP> (=carte en français). la balise <MAP> permet ainsi à partir d’une seule image de proposer un panel de différentes destinations internes comme externes à la page web. Elle est utile pour de nombreuses situations, en particulier pour les menus graphiques.

Afficher des images

Les images doivent être au format : JPEG, PNG ou GIF

La balise IMG du langage HTML permet d’insérer des images dans une page Web

Les principaux attributs de la balise IMG sont les suivants :

SRC : Indique l’emplacement (URL) de l’image (il est obligatoire), spécifier l’URL complète de l’image.
ALIGN : Spécifie l’alignement de l’image par rapport au texte adjacent. Il peut prendre les valeurs : TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous).
ALT : Permet d’afficher un texte alternatif lorsque l’image ne s’affiche pas (l’utilité première du ALT est de remplacer l’image dans les navigateurs non graphiques).
TITLE : Permet d’afficher une infobulle lors du survol de l’image par le curseur.
WIDTH : Permet de spécifier la largeur de l’image.
HEIGHT : Permet de spécifier la hauteur de l’image.

Exemple de balise pour insérer une image :

<img src="images-paysages/riviere-montagne.gif" alt="La rivière Arve traverse la forêt" title="L'Arve dans la forêt" width="480" height="480" border="0">

Images réactives

Les zones cliquables sont créées sur la surface même de l’image grâce à l’attribut USEMAP utilisé conjointement avec la balise <MAP>.

L’attribut USEMAP de la balise <IMG> pointe vers une balise

contenant la description du découpage de l’image en zones cliquables. Par exemple pour une MAP dont le nom est riviere, la balise pour insérer une image est :

<img src="images-paysages/riviere-montagne.gif" alt="La rivière Arve traverse la forêt" title="L'Arve dans la forêt" width="480" height="480" border="0" usemap="#riviere">

La balise <MAP> a un attribut NAME définissant son nom (NAME=« nom ») et contient les zones cliquables déclarées grâce à des balises AREA. Dans notre exemple on écrira :

<map name="riviere">

Les zones cliquables

A une zone réactive est associée une balise <AREA> dont les attributs sont :

NAME : le nom de la zone.
SHAPE : le type de zone (cercle, rectangle ou polygone).
COORDS : les coordonnées de la zone (séparées par des virgules).
HREF : l’adresse de destination (URL).
NOHREF : spécifie qu’une zone n’a pas de lien associé.
ALT : le commentaire qui apparaitra lorsque le curseur de la souris passera sur la zone.
TITLE : infobulle lors du survol de l’image par le curseur.
TARGET : _top, _self, _blank, _parent ou nom.

L’attribut TARGET

Cet attribut est assez souvent utilisé. Il permet de dire au navigateur où ouvrir le lien (nouvelle fenêtre, fenêtre principale, fenêtre nommée...). Les 5 valeurs possibles de cet attribut sont les suivantes :

_top : ouvre le lien (page cible) dans la fenêtre principale du navigateur
_self : ouvre le lien (page cible) dans la fenêtre courante (la fenêtre d’appel)
_blank : ouvre le lien (page cible) dans une nouvelle fenêtre sans nom
_parent : ouvre le lien (page cible) dans la frame parent
nom : ouvre le lien (page cible) dans la frame de nom « nom » (valeur de l’attribut name)

Syntaxe d’une zone réactive

<AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées" HREF="adresse_destination" TITLE="commentaire">

Zone circulaire

Une zone circulaire est définie par la balise et dont l’attribut COORDS prend pour valeurs la liste des abscisse, ordonnée à l’origine du centre et le rayon du cercle.

En d’autres termes, les coordonnées du cercle sont : « centre-x, centre-y, rayon »

Syntaxe :

<AREA SHAPE="circle" COORDS="x,y,rayon" HREF="destination">

Exemple :

<MAP NAME="riviere">

<area shape="circle" coords="102,78,46" title="foret" href="http://www.faqs.org/docs/htmltut/images/_MAP.html" target="_blank">

</MAP>

<img src="images-paysages/riviere-montagne.gif" alt="La rivi&egrave;re Arve traverse la for&ecirc;t" title="L'Arve dans la&nbsp;for&ecirc;t" width="480" height="480" border="0" usemap="#riviere">

Zone rectangulaire

Une zone rectangulaire est définie par la balise et dont l’attribut COORDS prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit séparées par des virgules.

En d’autres termes, les coordonnées du Rectangle sont : « gauche-x, haut-y, droite-x, bas-y »

Syntaxe :

<AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF="destination">

Exemple :

<MAP NAME="riviere">

<area shape="rect" coords="246,59,394,138" title="Foret" href="http://www.commentcamarche.net/contents/html/htmlimages.php3" target="_self">

</MAP>

<img src="images-paysages/riviere-montagne.gif" alt="La rivi&egrave;re Arve traverse la for&ecirc;t" title="L'Arve dans la&nbsp;for&ecirc;t" width="480" height="480" border="0" usemap="#riviere">

Zone polygonale

Une zone polygonale est définie par la balise et dont l’attribut COORDS prend pour valeurs la liste des abscisse et ordonnée à l’origine de chacun des points.

En d’autres termes, les coordonnées du polygone sont : « la suite des coordonnées x, y des points définisant le polygone séparées par des virgules »

Syntaxe :

<AREA SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4,...x27,y27,x1,y1" HREF="destination">

Exemple :

<MAP NAME="riviere">

<area shape="poly" coords="117,135,197,161,312,174,417,199,457,200,455,305,158,305,138,287,181,255,177,218,143,167,116,136,117,135" title="Riviere" href="http://cyberzoide.developpez.com/html/map.php3" target="_blank">

</MAP>

<img src="images-paysages/riviere-montagne.gif" alt="La rivi&egrave;re Arve traverse la for&ecirc;t" title="L'Arve dans la&nbsp;for&ecirc;t" width="480" height="480" border="0" usemap="#riviere">

Map complète avec les trois zones réactives

<img src="images-paysages/riviere-montagne.gif" alt="La rivi&egrave;re Arve traverse la for&ecirc;t" title="L'Arve dans la&nbsp;for&ecirc;t" width="480" height="480" border="0" usemap="#riviere">

<map name="riviere">

<area shape="rect" coords="246,59,394,138" title="Foret" href="http://www.commentcamarche.net/contents/html/htmlimages.php3" target="_self">

<area shape="poly" coords="117,135,197,161,312,174,417,199,457,200,455,305,158,305,138,287,181,255,177,218,143,167,116,136,117,135" title="Riviere" href="http://cyberzoide.developpez.com/html/map.php3" target="_blank">

<area shape="circle" coords="102,78,46" title="foret" href="http://www.faqs.org/docs/htmltut/images/_MAP.html" target="_blank">

</map>