|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Principe
La
balise <MAP> et ses attributs
Exercice
pratique : une carte interactive |
|
1. Principe
Les "maps" ou cartes sont des zones réactives
que l'on place exclusivement sur des images; ainsi, sur une même
image, on peut définir plusieurs liens (internes ou externes).
Par ce moyen, l'internaute peut accéder à l'information
de manière beaucoup plus intuitive et rapide qu'à travers
une longue liste de liens hypertextes classiques.
|
 |
2. La balise <MAP> et ses attributs
La balise <MAP> doit être utilisée avec
la balise <AERA>. Cette balise <AERA> possède
3 attributs :
- SHAPE qui peut prendre 3 valeurs :
- RECT pour une zone réactive de forme rectangulaire
avec les coordonnées x1,y1,x2,y2
qui signifient :
x1 = coin en haut à gauche, pixel à
partir de la gauche.
y1 = coin en haut à gauche, pixel à
partir du haut.
x2 = coin en bas à droite, pixel à
partir de la gauche.
y2 = coin en bas à droite, pixel à
partir du haut .
- CIRCLE pour une zone de forme circulaire x,y et r
:
x = centre, pixel à partir de la gauche.
y = centre, pixel à partir du haut.
r = Rayon en pixel.
- POLY pour une zone de forme polygone avec les coordonnées
x1,y1,x2,y2 ...
xn,yn :
x = Pixel un coin à partir de la gauche.
y = Pixel un coin à partir du haut.
Vous pouvez définir autant de coins que vous voulez;
pensez que du dernier coin défini une ligne rejoindra
le premier coin défini Cette ligne fermera le polygone.
- COORDS
- Avec COORDS="" vous donnez les coordonnées
des surfaces associées à des liens.
Les données en pixels sont des valeurs absolues dans
le graphique qui doit être composé de liens.
Les mentions doivent être faites entre guillemets et
il faut séparez toutes les valeurs en pixels par des
virgules.
- HREF, qui définit la page de destination du lien,
interne ou externe, correspondant à la zone.
Si vous désirez définir explicitement une surface
comme n'étant pas cliquable vous pouvez le faire avec l'attribut
NOHREF. Si vous omettez une telle mention, les surfaces
non définies avec HREF= seront automatiquement non
cliquables.
A noter que la balise <AERA> ne se referme pas.
Pour marquer le graphique comme étant composé de liens
vous devez noter l'attribut USEMAP= (voir l'exemple ci-dessus).
Derrière le signe égal donnez le nom que vous avez attribué
dans la définition des surfaces associées à des
liens dans le repère d'ouverture <MAP>. Le nom
doit être placé entre guillemets et devancé par
un #.
Exemple : |
|
Sur cette image, nous souhaitons former 3 zones réactives avec
3 liens distincts.
Il faut donc créer 3 "AERA" de forme rectangulaire
Vous pouvez tester les 3 zones qui pointent vers 3 liens différents. |
 |
| |
Voici le code HTML :
<img src="img/losange_map.gif"
width="300" height="150" border="0"
usemap="#cours">
<map name="cours">
<area shape="rect" coords="152,36,240,59"
href="sommaire_dhtml.htm">
<area shape="rect" coords="69,52,143,80" href="sommaire_html.htm">
<area shape="rect" coords="102,85,228,112"
href="sommaire_javascript.htm">
</map> |
|
3. Exercice pratique : une carte interactive
Le but de cet exercice est d'insérer un évênement
javascript au niveau du lien de chaque zone réactive.
Cet évênement correspond au passage de la souris sur
chacune des zones. Il s'agit de "ON MOUSE OVER".
Au déclenchement de cet évênement, on affichera
le nom de la règion survolée dans un calque.
Nous aurons l'occasion de revenir plus en détail sur les calques
dans la partie DHTML ainsi que sur les évênements JAVASCRIPT.
Démonstration : Déplacez votre souris sur les
5 zones |
|
 |
| |
|
|
|
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
