html-fond

Image réactive (map area)

Les images réactives utilisant la propriété map area

Il est possible de créer des zones cliquables à l’intérieur même d’une image grâce à l’attribut USEMAP utilisé conjointement avec la balise MAP.
L’attribut USEMAP de la balise <IMG> pointe vers une balise <MAP> contenant la description du découpage de l’image en zones cliquables.

La balise <MAP> a un attribut NAME définissant son nom et contient les zones cliquables déclarées grâce à des balises AREA.

Balise Attribut Valeur
MAP NAME
AREA SHAPE RECT
Rectangle (ses coordonnées sont:
« abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit »)

CIRCLE
Cercle (ses coordonnées sont:
« abscisse centre, ordonnée centre, rayon »)

POLY
Polygone (ses coordonnées sont:
« la suite des coordonnées séparées par des
virgules »)

HREF URL
Lien vers l’URL
COORDS « xy,xy,xy,xy »
Contient les coordonnées de la zone cliquable, séparées par des virgules.

Voici ci-dessous un exemple d’image réactive :

<IMG SRC="images/image.gif"
	WIDTH=150
	HEIGHT=70
	USEMAP="#Map">
<MAP NAME="Map">
	<AREA SHAPE="rect"
		   HREF="debut.html"
		   COORDS="0,0,48,28">

	<AREA SHAPE="circle"
		   HREF="precedent.html"
		   COORDS="50,30,10">

	<AREA SHAPE="poly"
		   HREF="suivant.html"
		   COORDS="60,50,80,30,100,40,50,100">
</MAP>