Le langage HTML Balise AREA

Somaire

Image avec des zones cliquables

LES BALISES HTML

La balise <area> définit une zone à l'intérieur d'une une image-map (image-carte) une image-map image est une image avec des zones cliquables.

Balise <area> : Zone d'une carte

La balise AREA est utilisée pour marquer une zone sensible au clique sur une image.
Balise de type EN LIGNE :
Dans HTML la balise <area> n'a pas de balise de fin.
Dans la balise XHTML <area> doit être bien fermé :<area />.
Cette balise s'applique toujour à l'intérieur de la balise <map> et définie une zone cliquable sur une image.

Ses attributs spécifiques sont :
- shape : la forme de la zone
- coords : les coordonnées de la zonne (le coin haut gauche de l'image a pour coordonnées 0,0)
- href : l'adresse à atteindre en cliquant sur l'image
- target : la fenêtre dans laquelle s'ouvre la cible

La véritable utilisation de ce tag se fait par exemple sur un plan ou une carte contenant des éléments importants sur lesquels il serait intuitif de cliquer.
Par exemple pour un plan d'une ville, le clic sur le symbole H de l'hopital pour connaitre les détails de celui-ci.

Exemple :
Sélectionner le code
    
<map name="MonImage">
  <area shape="rect"coords="0,0,10,20"href="http://www.oujood.com"target="_blank" title="région1" />
  <area shape="rect" coords="15,1,10,20" href="http://www.google.fr" target="_blank"
  title="région2" />
<img src="../Images/image.gif" width="100" height="20" usemap="#MonImage" border="0" />
//L'image est liée à une carte constituée de deux régions rectangulaires :

 

Ses attributs

La colone DTD dan l tablau suivant indique dans quel HTML 4.01/XHTML 1,0 DTD l'attribut est autorisé:
S=Strict, T=Transitional, and F=Frameset.

Attributs obligatoires

Attribut Valeur Description DTD
alt text texte Specifies an alternate text for an area Indique un texte alternatif pour une région STF STF

Les attributs optionnels

Attribut Valeur Description Description DTD
coords coordonnées Spécifie les coordonnées d'une zone STF
href URL Spécifie la destination d'un lien dans une zone STF
nohref nohref Indique que la zone n'a pas de lien associé STF
shape default
rect
circle
poly
Spécifie la forme d'une zone STF
target _blank
_parent
_self
_top
Spécifie l'emplacement pour ouvrir la page liée spécifié dans l'attribut href TF

Attributs standards

La balise <area> soutient les attributs standard suivantes:

Attribut Valeur Description DTD
class nom de classe Spécifie un nom de classe d'un élément STF
dir ltr rtl Spécifie l'orientation du texte pour le contenu dans un élément STF
id nom de l'id Spécifie un ID unique pour un élément STF
lang language_code Spécifie un code de langue pour le contenu dans un élément STF
style style_definition Spécifie un style en ligne pour un élément STF
title text Spécifie des informations supplémentaires sur un élément STF
xml:lang language_code Spécifies une langue pour le code contenu dans un élément, en XHTML documents Spécifie STF
accesskey caractère Spécifie un raccourci clavier pour accéder à un élément STF
tabindex nombre Specifies the tab order of an element Spécifie l'ordre de tabulation d'un élément STF

Les attributs de l'événement

Le <area> prend en charge les attributs d'événement suivant:

Attribut Valeur Description DTD
onclick action à exécuter Script à exécuter sur un clic de souris STF
ondblclick action à exécuter Script à exécuter sur double-cliquez sur la souris STF
onmousedown action à exécuter Script à exécuter lorsque le bouton de la souris est pressé STF
onmousemove action à exécuter Script à exécuter lorsque le pointeur de la souris se déplace STF
onmouseout action à exécuter Script à exécuter lorsque le pointeur de la souris sort d'un élément STF
onmouseover action à exécuter Script à exécuter lorsque pointeur de la souris sur un élément STF
onmouseup action à exécuter Script à exécuter lorsque le bouton de souris est relâché STF
onkeydown action à exécuter Script à exécuter quand une touche est pressée STF
onkeypress action à exécuter Script à exécuter lorsqu'une touche est enfoncée et relâchée STF
onkeyup action à exécuter Script à exécuter quand une touche est relâchée STF
onblur action à exécuter Script à exécuter quand un élément perd le focus STF
onfocus action à exécuter Script à exécuter quand un élément reçoit le focus STF

    Vous êtes ici:Balise area     Retour à la liste des balises


>



Retour à l'accueil du site

Par carabde 10 mars 2014