Les liens

les zones cliquables

On peut mettre plusieurs liens sur une image dans différentes zones, il suffit de découper l'image virtuellement en plusieurs zones.

On utilise alors les balises: <MAP> et <AREA> ensemble avec leurs attributs et <IMG>:
-pour map: l'attribut NAME, qui donne un nom a l'image et est obligatoire.
-pour area: l'attribut SHAPE, qui peu prendre les valeurs: rect,circle et poly.
-pour area: l'attribut COORDS, pour les coordonnées, exprimé en pixels.
-pour img: l'attribut USEMAP, pour le nom de l'image qui doit etre le meme que pour name.

Il faut tout d'abord trouver les coordonnées des zones à cliquer, pour cela il faut mettre un lien sur l'image et indiquer l'attribut ismap dans une page html comme ceci :
<a href =""><img src="exemple/clic01.gif" ismap / > </a >
regardez l'exemple: sur une page html

les zones rectangles

Les zones cliquables peuvent être de différente forme, voyons les rectangles ou carrées.
Il faut de déterminé 2 points par zone dans cet ordre: 1( haut à gauche) ,2 (bas à droite). . prenons une image que nous allons couper en 4 zones:

Les coordonnées d'un point sont exprimés en pixels par deux chiffres(x et y):
X étant la distance qui sépare ce point de la gauche de l'image et Y la distance qui sépare ce même point du haut de l'image.

Après le calcul des coordonnées nous obtenons :
- zone 1 : 0.0, 100.100
- zone 2 : 100.0, 200.100
- zone 3 : 0.100, 100.200
- zone 4 : 100.100, 200.200

L'écriture est en deux parties:
On nome l’image, par exemple (extra), la première partie devient :
<img src="exemple/clic02.gif" usemap="#extra" />
La deuxième partie avec les coordonnées peut être placé en bas de la page mais dans le Body:
<map name="extra" >
<area shape="rect" coords="0, 0, 100, 100" href="zone1.htm" / >
<area shape="rect" coords="100, 0, 200, 100" href="zone2.htm" / >
<area shape="rect" coords="0, 100, 100, 200" href="zone3.htm" / >
<area shape="rect" coords="100, 100, 200, 200" href="zone4.htm" / >
</map>
regardez l'exemple: sur une page

les zones circulaires

Pour les zones circulaires, nous avons besoins de déterminer le centre du cercle et le rayon, pour trouver les coordonnées du centre procéder comme pour les zones rectangles

on obtient pour le centre: 100,100
et pour le rayon: 96
la première partie devient :
<img src="exemple/clic04.gif" usemap="#extra" />
La deuxième partie :
<map name="extra" >
<area shape="circle" coords="100, 100,94" href="zone-circulaires.htm" / >
</map>
regardez l'exemple: sur une page

Les zones polygonales

pour les polygones on doit determiné les coordonnées de tout les points formant le polygone en recpectant l'ordre, pour chaque point prendre x et y, on peut proceder comme pour les autres zones pour trouver les coordonnées:

pour cet exemple nous avons:
- 1 : 92,32
- 2 :150,66
- 3 : 88,149
- 4 : 93,81
- 5 : 70,62
la première partie devient :
<img src="exemple/globe.jpg" usemap="#globe" />
La deuxième partie :
<map name="globe" >
<area shape="poly" coords="92,32,150,66,88,149,93,81,70,62" href="zone-polygonale.htm" / >
</map>
regardez l'exemple: sur une page

< < Précédent