Partout Les forums Les lexiques Les tutoriaux

Apprendre les langages du web c'est si simple avec nous

Les images interactives - XwZ

Dans ce tutorial vous apprendrez comment rendre plusieurs endroits cliquables sur une seule et même image. Fini les découpages inutile. Grâce à cette méthode vous pourrez créer un design complexe avec le moins d'images possible.
Les balises que l'on utilise sont map et area.
La syntaxe est simple :

<map>
   <area />
   <area />
</map>

Les attributs à utiliser dans la balise map sont name et id. Ils servent tout les deux à lier la "carte" (traduction de map) avec l'image.
Les attributs à utiliser dans la balise area sont shape, coords, href et alt.

shape :
Sert à désigner une des figures à dessiner sur l'image

coords :
Sert à désigner les coordonnées des points de la figure choisie.

href :
Désigne la destination du lien représenté par la figure dessinée.

alt :
Donne un titre à la page de destination du lien.

Les différentes valeurs de shape disponible sont :
rect :
Cette figure est un rectangle, les coordonnées qui lui correspondent sont :
x1,y1,x2,y2 (x1 et y1 désigne le premier point et x2 et y2 désigne le deuxième point)

poly :
Cette figure est un polygone, les coordonnées qui lui correspondent sont :
x1,y1,x2,y2,x3,y3,etc. (chaque point désigne un coin du polygone. le dernier point serra automatiquement relié au premier.)

circle :
Cette figure est un cercle, les coordonnées qui lui correspondent sont :
x1,y1,r (x1 et y1 désigne le centre du cercle et r le rayon du cercle.)

Pour lier l'image à la carte il faut utiliser usemap dans la balise img.
Voila la syntaxe :

<img src="chemin_de_limage" usemap="#nom_de_la_carte" alt="titre globale de l'image" />

Exemple :

<img src="../images/tuto/images_map_exemple.png" alt=<"index de htmlearn" usemap="#image" />
<map name="image" id="image">
    <area shape="rect" coords="6,19,156,114" href="../accueil.html" alt="apprendre le html" />
    <area shape="poly" coords="168,155,291,149,259,71,243,125,222,47,210,70,197,43,196,43" href="http://www.google.fr" alt="google.fr" />
    <area shape="circle" coords="72,181,60" href="../forum.html" alt="forum html" />
</map>

Les commentaires :