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 :-) :
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 :
|
Accueil
Membres
Forum
Articles
Download
Sondages
Outils
Scriptland
ProgBoards
Morbleu !
