OUJOOD.COM
Image avec des zones cliquables
LES BALISES HTMLLa 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 : 📋 Copier le code
<map name="MonImage"> <area shape="rect"coords="0,0,10,20" href="https://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