Dw10 - Rollover sur Images
Je suis bien décidée d'étudier aujourd'hui comment se font les images survolées ou rollover sur images dans Dreamweaver8.
Je prépare un dossier dans mon site qui contiendra cette page htm et les images nécessaires
. 
J'ai appelé l'image de gauche accueilc.jpg et l'image de droite accueilf.jpg. leur taille est : 150 x 40 pixels
Je vais faire le rollover pour me rendre à la page d'index :
1 - menu Insertion / Objets image / Image Survolée
2- la boite de dialogue suivante apparaît :
Nom de l'image : Image3 . C'est Dreamweaver qui génère cet identifiant mais vous pouvez donner un autre nom à l'identifiant. Nous gardons id="image3"
Image originale : c'est celle qui va se trouver sur la page avant le passage de la souris sur l'image.
Image survolée : celle qui va apparaître au passage de la souris
Texte secondaire : c'est la petit phrase descriptive pour les non-voyants
Si cliqué, aller à l'URL : c'est le lien que vous allez mettre sur cette image pour vous rendre sur la page d'accueil .
Maintenant, regardons le code que ces images ont généré en html dans Dreamweaver, du côté du code :
Je sélectionne le bouton Accueil que je viens de faire puis je clique sur le bouton : Afficher en mode code :
Là où le code est surligné en noir, c'est le code de l'image originale : Dreamweaver utilise un script en Javascript pour exécuter une image survolée.Dreamweaver permet aussi au Navigateur Nescape d'interpréter les images survolées. C'est pour cela que Dreamweaver utilise un script .
<img src="accueilc.jpg" alt="atteindre ma page d'accueil" name="Image3" width="150" height="40" border="0">
Le lien est sur une image : Donc l'image est entre la balise <a> et </a>
<a href="../index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','accueilf.jpg',1)"><img src="accueilc.jpg" alt="atteindre ma page d'accueil" name="Image3" width="150" height="40" border="0"></a>
On voit que onMouseOut et onMouseOver sont des attributs de la balise <a> :
onMouseout veut dire quand la souris quitte l'élément image de la balise img,
onMouseOver veut dire quand la souris survole l'élément image de la balise img,
Ce sont deux événements parfaitement conformes aux règles du W3C bien interprétés par Internet Explorer. Nous avons une Image3 , quand la souris passe sur l'élément, l'Image, elle se change en accueilf.jpg .
MM_swapImgRestore() et MM_swapImage() sont des fonctions javascript qui sont définies dans le head.entre les balises <script type="text/JavaScript"> et </script>
Voilà pourquoi, il n'est pas facile d'expliquer comme faire une image survolée avec Dreamweaver et que vous pouvez tout à fait ne pas savoir comment le logiciel travaille puisqu'il fait sont boulot et que vous avez de belles images survolées !
Page conçue et réalisée par Danielle Grünberg le 17 mars 2006