Les balises HTML

La balise <AREA>

Type : vide

Description de la balise :

Cette balise se place à l'intérieur de la balise <MAP>, elle va en fait servir à délimiter un zone géométrique qui correspondra à un lien (hypertexte). Elle est donc très pratique si vous voulez que les différentes zones d'une image correspondent chacune à un lien. Vous devrez tout d'abord lui donner l'attribut "shape" qui pourra prendre les valeurs "default/rect/circle/poly". Cela donnera donc la forme de la zone cliquable ( rect sera un rectangle, circle un cercle, poly un polygone et default pour une forme indéterminée). Il faut ensuite mettre l'attribut "coords" qui définira les coordonnées de la zone. Il y a ici différents cas :

Si l'attribut est default ou poly, vos coordonnées seront de la forme : x1,y1,x2,y2,x3,y3,etc. Il faut mettre autant de points qu'il y a de côtés à votre polygone. Par exemple, pour un pentagone (5 côtés, il faudra aller jusqu'à x5 et y5).
Pour le rectangle, il faut définir seulement deux points, le navigateur s'occupe du reste. vous devrez mettre le coin haut gauche et le coin bas droit. Cela nécessitera donc 4 coordonnées ( 2 pour chaque point) x1,y1,x2,y2.
Pour le cercle, il faut donner 3 valeurs x1,y1,r ; les deux premières correspondent au centre du cercle et la 3e est la longueur du rayon.

Pour vos coordonnées, sachez que le point (0,0) est celui situé dans le coin haut gauche de l'image. C'est donc l'origine du repère.
Il faudra ensuite évidemment donner le lien qui sera affecté à chacune des images. Pour ça, il faut utiliser l'attribut "href" suivi d'un "=" puis de l'adresse du lien entre guillemets.

Code Source		Aperçu
<map name="exemple"> <area shape="CIRCLE" coords="67,40,27" href="http://www.lenoob.com"> <area shape="poly" coords="88,112,111,113,125,132,98,152,87,149" href="http://www.lenoob.com/equipe.php"> <area shape="poly" coords="30,107,49,128,53,144,46,152,24,146,10,140,15,132, 12,119,25,117" href="http://www.lenoob.com/tutoriels.php"> <area shape="poly" coords="48,62,25,104,28,107,34,104,53,129,56,146,83, 146,87,112,112,113,113,91,91,55,68,70" href="http://www.lenoob.com/alex_guestbook4/livreor.php" target="new"> </map> Cliquez sur les différentes zones de l'image. <img src="logo.gif" width="150" height="165" alt="" border="0" usemap="#exemple">		Cliquez sur les différentes zones de l'image.

Revenir à la liste des balises