Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Créer une image de survol (rollover) avec Dreamweaver

 

Ce tutoriel va illustrer la création d'images de survol et des boutons dans Dreamweaver CS5.

Vous avez sans doute remarqué que quelques images sur une page web, ils changent lorsque vous déplacez la souris sur eux. Les images qui apparaissent lorsque la souris se déplace sur une une image sont appelées images de survol, et l'effet est obtenu en ayant réellement deux images. Une image est là, dans l'état normal de la page, la seconde apparaît à la place de la première lorsque l'utilisateur déplace sa souris dessus.

Voyons comment faire cela dans Dreamweaver.

Voici une page avec une petite quantité de texte:

Texte exemple

Nous allons maintenant mettre un bouton sur cette page qui invite l'utilisateur à lire la suite.

J'ai déjà créé deux boutons, et ici, ils sont côte à côte:

Bouton suite 1Bouton suite 2

Le premier bouton apparaîtra sur la page juste en dessous du texte.

Pour l'insérer comme une image survolée sélectionner le menu Insertion, puis Objets image, puis Image survolée dans le menu flottant.

Insertion image survolée

La boîte de dialogue Insérer une image survolée s'affiche.

Insérer image survolée

 

 

Tout d'abord, donnez à l'image un nom. Je l'ai appelé La suite, un nom qui devrait aider à me rappeler de ce que c'est quand je le vois dans ma liste d'images.

Maintenant j'ai besoin de spécifier à la fois l'image originale et l'image de survol. Je les ai déjà mis à la fois dans le dossier images du site local afin que je puisse les retrouver deux facilement. Notez que le nom du fichier de la première image n'est pas le même que le nom que je donne l'image de survol, c'est suite. Ce nom de retournement est utilisé pour d'autres choses dans Dreamweaver.

J'entre du texte Alt comme d'habitude, et, enfin, l'URL de la "cible", c'est à dire l'emplacement (intérieur ou à l'extérieur de mon site) où je veux que l'utilisateur soit dirigé en appuyant sur ce bouton sur ce bouton. Nous reviendrons sur cela un peu plus tard. Dans cet exemple, j'ai fait le lien vers une autre page sur les images dans Dreamweaver.

La boîte de dialogue complétée ressemble à ceci.

Boîte insertion image survolée

Notez que l'image rollover préchargée est cochée. Cela signifie que lorsque l'utilisateur arrive d'abord à la page contenant le rollover, les deux images sont téléchargées immédiatement. Si vous ne cochez pas cette option, lorsque l'utilisateur déplace la souris sur l'image de survol pour la première fois il peut y avoir un retard alors que l'image deuxième bouton est téléchargée.

Maintenant, appuyez sur OK et le bouton est en place.

Image insérée

Le retournement d'image ne fonctionne pas en mode création, nous avons donc besoin de la regarder en mode Affichage en direct. Passez en vue et la page ressemble à ceci.

Image survolée dans la page

Passez le curseur sur le bouton et ça ressemble à ça en Affichage direct ou dans le navigateur internet:

Changement image

Pour vérifier que le bouton fonctionne en mode Affichage en direct, maintenez la touche Ctrl enfoncée et appuyez dessus.

Voici l'exemple reproduit dans ce tuto (passez le curseur au dessus du bouton):

La suite

 

 

   

 

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site