Accueil > HTML > HTML – Les images réactives

HTML – Les images réactives

25/03/2002 cybwarrior Commenter Allez aux commentaires
This entry is part 20 of 23 in the series HTML - Tutoriel

HTML - Tutoriel

Une image réactive permet d’associer des liens à des parties bien déterminées d’une image.

Une image réactive est composée de deux choses :


  • L’image proprement dite, incluse de manière classique avec la balise <IMG>

  • Un certains nombre de balises qui vont définir la découpe de l’image


Prenons par exemple la photo du « Pirate » ci-dessous (tirée du LIVRE D’OR DU CYCLISME 1998
- Jean-François Quénet – Editions SOLAR. Numérisée à l’aide du bôôô scanner que Papa Noël m’a
offert :-) :



Marco Pantani




Nous allons la découper en plusieurs parties :

  • La roue avant

  • Le guidon

  • La selle

  • Le pédalier


La découpe est consignée à l’intérieur de la balise du type conteneur <MAP>. En
Anglais, Map veut dire Carte.

En gros, c’est ce que l’on va faire, en spécifiant des zones à l’intérieur.

Les choses sont tout de mêmes bien faites, puisque zone ce dit Area en anglais, et c’est justement
la balise du même nom (<AREA> est du type marqueur) que l’on va utiliser.

La balise <AREA> posséde 6 attributs :


  • shape definit la forme de la zone. Il en exite 3 :

    • circle pour un cercle

    • rect pour un rectangle

    • polygon pour un polygone


  • href indique le lien à suivre quand la zone est clickée

  • coords définit les coordonnées de la zone, suivant la forme désignée par l’attribut
    shape :

























    Attribut coords suivant la forme utilisée
    Forme Coordonnées Exemple
    circle X,Y,R <AREA shape=circle area= »5,10,5″>
    <!– 5 pixels sur X, 10 pixels sur Y, 5 pixels de rayon –>
    rect X1,Y1,X2,Y2 <AREA shape=rect area= »5,10,20,25″>
    <!– Coin supérieur gauche: 5 pixels sur X, 10 pixels sur Y

    Coin inférieur droit: 20 pixels sur X, 25 pixels sur Y –>
    polygon X1,Y1,…,Xn-1,Yn-1,Xn,Yn <AREA shape=polygon area= »0,15,5,10,10,15,5,20″>
    <!– 1er coin: 0 pixels sur X et 15 pixels sur Y

    2ème coin: 5 pixels sur X et 10 pixels sur Y

    3ème coin: 10 pixels sur X et 15 pixels sur Y

    4ème coin: 5 pixels sur X et 20 pixels sur Y –>


  • target definit la cible où doit être ouvert le lien

  • alt permet d’ajouter une info-bulle, comme pour la balise <A>

  • nohref est booléan (il se suffit à lui même). Il est utilisée lorsqu’on ne
    veut pas associer de lien à une zone, pour des scripts par exemple


Pour définir les zones, on peut le faire manuellement, ou bien via un programme spécialisé.

Au final, voici ce que j’obtiens :


<MAP name= »Marco »>

<AREA shape=circle coords= »270,336,75″ nohref alt= »Est-ce des boyaux ou des pneus ? »>

<AREA shape=rect coords= »36,198,102,217″ nohref alt= »La magnifique selle du Pirate! »>

<AREA shape=circle coords= »137,350,23″ nohref alt= »Un braquet Enooorme de 53 dents! »>

<AREA shape=polygon nohref alt= »Les mains en bas du guidon : quel style ! »

coords= »201,221,234,193,256,196,269,189,284,228,241,231,242,262,199,270″>

</MAP>

Vous remarquez que je n’ai pas utiliser l’attribut href, mais l’attribut nohref
comme je n’utilise pas de liens mais juste les infos-bulles.

La balise <MAP> ne posséde qu’un seul et unique attribut : name. Il
sert à identifier la carte. Ici, on l’a appelée ‘Marco’.

Cette section <MAP> peut être placée n’importe où dans la section <BODY>.

L’image est incluse dans le document comme n’importe quelle image : avec la balise <IMG>.
Seul petite modification : il faut ajouter l’attribut usemap, avec le nom de la carte à
utiliser, précédé du caractère dièse (#), comme pour les liens dans la même page avec la
balise <A>.

Au final, notre document devient :


<MAP name= »Marco »>

<AREA shape=circle coords= »270,336,75″ nohref alt= »Est-ce des boyaux ou des pneus ? »>

<AREA shape=rect coords= »36,198,102,217″ nohref alt= »La magnifique selle du Pirate! »>

<AREA shape=circle coords= »137,350,23″ nohref alt= »Un braquet Enooorme de 53 dents! »>

<AREA shape=polygon nohref alt= »Les mains en bas du guidon : quel style ! »

coords= »201,221,234,193,256,196,269,189,284,228,241,231,242,262,199,270″>

</MAP>

<IMG src= »http://www.multimania.com/html/margo.jpg » usemap= »#Marco »>

Note : pour le résultat affiché, j’ai modifié le code est substitué l’attribut nohref
par l’attribut href pour bien voir les zones lorsque l’on clique dessus.

Voici le résultat :




Est-ce des boyaux ou des pneus ?
La magnifique selle du Pirate!
Un braquet Enooorme de 53 dents!
Les mains en bas du guidon : quel style !

Marco Pantani

Series Navigation«HTML – Les couleursHTML – Le son»
Categories: HTML Tags:
  1. Pas encore de commentaire
  1. Pas encore de trackbacks