Initiation à dreamweaver mx 2004

dw5 - Rollover sur image mappée

Accroche-toi, Didier,mais cela est un effet très intéressant.
Il arrive que sur une image, tu sélectionnes une zone , (c'est le mappage) et que cette zone devienne sensible : tu peux mettre un lien dessus.
Par exemple sur une vue de Saint Aubin, tu vas mapper l'église et le lien que tu vas créer enverra tes visiteurs vers une page consacrée à l'histoire de l'église . Je vais t'expliquer comment faire avec le logiciel DreamweaverMX 2004.

1- définir la zone réactive .Il faut bien entendu inserer une image et sur cette image, on va mettre la zone réactive, dite aussi mappée.Donc Menu Insertion/Image et tu la cherches avec la boite de dialogue. Choisir la forme qui conviendra le mieux.Cet outil se trouve tout en bas, à gauche du panneau des propriétés.et surligner sur l'image la zone réactive . L'image est mappée comme ceci . Celle qui a les 4 petits carrés est encore sélectionnée.
et dans l'inspecteur des propriéts tu as ceci : tu mets l'adresse de la page que tu veux atteindre dans ton site dans la boite de texte Lien . Pour la cible tu peux laisser vide ou mettre blank et pour le texte secondaire tu fais une petite description, cela sert surtout pour les non-voyants, car pour les voyants souvent cela affiche une petite étiquette avec un commentaire quand le pointeur de la souris passe sur la zone . La zone réactive est faite. Laisse là sélectionner pour faire la suite.
2 -Maintenant tu vas faire l'image rollover sur la zone réactive. Il faudra recommencer l'opération si tu veux faire une image rollover sur une autre zone réactive . Afficher le panneau le l'inspecteur des balises et les comportements dans mon cas les deux panneaux sont groupés
3- le panneau de l'inspecteur des balises se trouve en général sur la partie droite de ton logiciel et tu dois voir le contenu de l'onglet Comportements comme ci-contre
sélectionnes l'événement OnMouseOver
Avec la petite flêche près du + tout en haut du panneau afficher les comportements possibles . Sélectionnes Permuter une image
Une boite de dialogue s'ouvre et tu mets l'adresse de la nouvelle image dans définir la source à , avec le bouton parcourir et tu coches :précharger les images et restaurer les images OnMouseout et n'oublie pas OK
Voilà, tu n'as plus qu'à recommencer pour une image suivante si tu as prévu de faire plusieurs effets ainsi dans la page. N'hésite pas à envoyer un mail si tu rencontres un problème.
Tutoriel fait le 24 mars 2005 par Danielle Grünberg © dg 2005

retour Ateliers

retour Accueil