Tutorial DreamWeaver

Créer un roll-over

1 un roll-over est un effet qui remplace un objet lorsqu'il est survolé par la souris. Un roll-over peut-être un effet sur du texte, mais également sur une image. C'est ce que vous allez voir ici. Il faut considérer que vous disposez déjà des deux images: l'image affiché, et l'image de remplacement. Elle possèdent la même taille, faute de quoi, l'image survolée prendra celle de l'image visible. Cliquez dans votre page à l'endroit ou vous souhaitez réaliser votre roll-over, puis cliquez sur Insertion/Objets image/image survolée.

2 Dans la boite de dialogue Insérer une image survolée, saisissez dans le champ Nom de l'image le nom que vous souhaitez lui donner. Ceci vous permettra de la retrouver plus facilement ultérieurement. Dans les champs, Image originale et Image survolée, cliquez sur le bouton Parcourir… afin de désigner les images à utiliser. Laissez l'option Précharger l'image survolée afin de permettre l'introduction du code HTML qui placera dans le cache l'image survolée. Dans le cas contraire, celle-ci ne sera pas visible avant le complet téléchargement de la page.

3 Dans le champ Texte secondaire, introduisez le texte relatif à la balise Alt, cliquez éventuellemnt sur le bouton Parcourir… pour indiquer le document cible de votre lien dans le champ Si cliqué, aller à l'URL. Appuyez sur le bouton OK pour valider.

4 Cependant, et bien que le réultat soit cohérant, la modification de l'effet ainsi que de l'image de substitution reste quelque peu délicat. En effet, il vous faut ensuite utiliser la palette Comportements (Maj+F4)après avoir cliqué sur l'élément à modifier. Ici vous y retrouverez les deux états de votre image à savoir onMouseout qui restaure l'image initiale lorsque vous n'êtes plus dessus l'image, et on Mouseover qui correspond ici à l'image de remplacement. Double cliquez sur permuter une image, afin de midifier l'image de substitution.

5 Dans la boîte de dialogue Permuter une image, cliquez dans la liste Images sur celle que vous souhaitez modifier. Cliquez ensuite sur le bouton Parcourir… afin de modifier l'image survolée. Cliquez sur le bouton OK pour valider.