41Mag - Balise <area> HTML5 – Zone cliquable ou lien dans une image

Balise <area> HTML5 – Zone cliquable ou lien dans une image

Exemple de balise <area> HTML5

1
2
3
4
5
6
7
8
9
 Rouge = Accueil, Vert = Google
 <img src="logoWindows.jpg" width="145" height="145" alt="Plan" usemap="#logo" />
 
<map name="logo">
  <area shape="rect" coords="0,0,70,70" href="http://41mag.fr" alt="Accueil" />
  <area shape="rect" coords="80,0,145,70" href="http://google.fr" alt="Google" target="_BLANK" />
  <area shape="rect" coords="0,80,70,145" href="#" alt="bleu" />
  <area shape="rect" coords="80,80,145,145" href="#" alt="orange" />
</map>
Résultat, le navigateur affichera :
Rouge = Accueil, Vert = Google
Plan

AccueilGooglebleuorange

Définition et usage

La balise <area> définit une zone cliquable dans une image.

La balise <area> est toujours imbriquée dans la balise <map>

Les balises <map> et <area> permettent de créer un champ de navigation basé sur une image. L’image est découpée en petites zones. Les liens correspondants sont exécutés après un clic, en fonction de la position de la souris. Vous pouvez définir ainsi des cartes géographiques, par exemple : un clic sur un pays affiche les pages nationales spécifiques. La balise <map> définit le champ de navigation et <area> les différentes zones.

Remarque : L’attribut usemap de la balise <img> est associé et identique à l’attibut de la balise <map>.Il crée une relation entre l’élément <map> et l’élément <img>

Attribut de la balise <area>
AttributValeurDescription
alttexteTexte alternatif à la zone <area>. Obligatoire si l’attribut href est présent
coordscoordonnéesIndiquez les coordonnées de la géographique
hrefurlIndiquez le lien hypertext
hreflang Newcode de langageIndiquez la langue du lien ciblé
Newtype de mediaIndiquez le média et le support pour lequel le lien ciblé à été optimisé
rel Newalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Indiquez la relation entre ce document et le lien ciblé
shapedefault
rect
circle
poly
Indiquez la forme de votre zone <area>
target_blank
_parent
_self
_top
framename
Indiquez le mode d’ouverture (nouvelle onglet …) du lien hypertext
type Newmime_typeIndiquez le Type MIME du document vers lequel pointe le lien
Évolution par rapport au HTML 4.01

De nouveaux attributs sont apparus en HTML5 tandis que d’autres ont été bannis (voir la liste ci-dessus).

Attribut standard :

La balise <area> prend en charge tous les attributs standard en HTML5.

> Liste complète des attributs

Attribut d’évènement :

La balise <area> prend également en charge tous les attributs d’événement HTML5.

> Liste complète des événements

Les balises d’image en HTML5

<area>Définit une zone cliquable ou un lien dans une image
<canvas>Définit un graphique réalisé à l’aide d’un script
<figcaption>Définit une légende pour un élément <figure>
<figure>Définit un contenu autonome
<img>Définit une image
<map>Définit une relation carte/image

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.