Faire une image à zones réactives (côté client)

Créer un site Web avec DreamWeaver
Faire une image à zones réactives (côté client)
Une image divisée en plusieurs zones liés à des documents différents est une carte graphique ou image à
zones réactives (hotspots en anglais). Il existe deux types de carte réactive, côté serveur ou côté client.
Les cartes graphiques côté client sont plus rapides, car le serveur n'a pas à interpréter les coordonnées du
point sur lequel l'utilisateur clique.
Exercice 1 : Zones en forme de rectangle sur un bandeau de navigation.
1. Copiez le dossier TP1_img_reactive. Définissez dans Dreamweaver un site basé sur ce dossier.
2. Ouvrez le document accueil.htm de ce dossier.
3. Insérez et centrez en haut de ce document l'image bandeau.gif.
C'est le bandeau de navigation du site.
4. Cliquez sur cette image .
5. Développez le bas de l'inspecteur de propriétés et sélectionnez l'outil Zone réactive Rectangulaire.
6. Avec un cliquer-glisser, tracez un rectangle autour de Nouveautés (textes + images). Si l'on souhaite
tracer un carré, il faut appuyer sur la touche Maj en même temps (idem pour un cercle avec l'outil cercle).
7. Faites un lien vers le fichier nouveaute.htm en cliquant sur
l'icône de dossier visible dans l'inspecteur de propriétés et
en choisissant ce fichier dans l'arborescence.
8. Complétez le texte alternatif à l'image (zone Sec) de manière judicieuse (ici saisir : Nouveautés).
9. Recommencez pour chaque partie du bandeau en choisissant le nom de fichier le plus évident et le texte
alternatif Sec le plus judicieux.
10. Dans la zone de saisie, à côté du mot Carte, saisissez comme nom bandeau dans l'inspecteur de
propriétés (au lieu de Map).
11. Enregistrez et testez la carte réactive dans le navigateur (F12).
Exercice 2 : Zones en forme de polygone sur la carte du Canada
Sur la carte du Canada, vous devez lier chaque zone correspondant à une province à son fichier.
1. Copiez le dossier TP2_img_reactive. Définissez un site basé sur ce dossier.
2. Ouvrez dans Dreamweaver le document provinces.htm de ce dossier.
3. Insérez l'image canada.gif.
4. Développez l'inspecteur de propriétés.
5. Saisissez comme nom de carte canada dans l'inspecteur de propriétés (au lieu
de Map).
6. Sélectionnez l'outil Zone réactive polygone.
7. Cliquez sur un des angles de la province du Saskatchewan, relachez le bouton de souris,
cliquer sur l'angle suivant et continuer ainsi. A tout moment, on peut modifier la position
d'un des points de la carte par cliquer-glisser du point avec la flèche Outil zone réactive
pointeur.
8. Cliquez sur le dossier de l'inspecteur de propriétés pour faire un lien sur le fichier
sask.htm.
9. Complétez le texte alternatif (Sec) de manière judicieuse.
10. Faites la même chose pour le Manitoba et toutes les autres provinces. Avant de tracer une autre zone,
pour indiquer que l'on arrête le tracé précédent, cliquez sur l'outil flèche puis sur une zone de l'image
sans zone réactive. Pour les Territoires du Nord-Ouest, tracez un polygone approximatif qui englobe les
îles.
11. Tracez un rectangle autour de la carte et faites un lien vers le fichier autres.htm pour qu'un clic sur une
autre zone pointe vers les informations sur d'autres provinces. Faites un clic DROIT pour sélectionner ce
rectangle et choisissez Mettre en arrière-plan dans le menu contextuel. Cette fonctionnalité permet, en cas
de superposition de zone, d'indiquer la zone à mettre en premier ou en arrière-plan, la zone en premierplan correspondant au clic de l'utilisateur.
12. Appuyez sur F12 pour tester la carte réactive.
Université de Marne-la-Vallée
DreamWeaver MX 2004 (v.7)
Octobre 2005
F. Petit / DW_MX7_imagereactive.doc
1/1