Image Rollovers dans Adobe CS5 Dreamweaver - des nuls

Dans Dreamweaver Adobe Creative Suite 5 (Adobe CS5), vous pouvez insérer des objets image, y compris des espaces réservés, des images survolées (images changeantes lorsqu'un utilisateur passe la souris sur l'image), des barres de navigation, et Fireworks HTML. Vous accédez à ces objets image en sélectionnant Insérer → Objets image.

1Créez les images à utiliser comme survol.

Vous pouvez générer ces images dans Fireworks, Illustrator, Photoshop ou toute autre application capable d'enregistrer des images optimisées pour le Web.

2Placez le curseur sur la page où vous voulez que le survol apparaisse.

Choisissez Insérer → Objets image → Image survolée ou cliquez sur le bouton Image survolée dans le panneau Insertion. La boîte de dialogue Insérer une image survolée.

3Nombre l'image.

Saisissez un nom d'image sans espaces dans le champ de texte Nom de l'image. Ce nom est utilisé dans le script créant le rollover.

4Cliquez sur les boutons Parcourir.

Le bouton Parcourir se trouve à droite des champs de texte Image originale et Image inversée. Localisez l'image que vous souhaitez afficher par défaut sur la page et l'image qui s'affiche uniquement lorsque quelqu'un passe la souris sur l'image.

5Laissez la case à cocher Preload Rollover Image sélectionnée.

Cette option télécharge l'image survolée lors du téléchargement de la page pour éviter les retards lors des survols.

6Décrivez l'image.

Saisissez un texte alt descriptif approprié dans le champ de texte Alt.

7Complétez le champ de texte Cliquez sur, Aller à l'URL.

Ceci dirige Dreamweaver où les spectateurs sont dirigés lorsqu'ils cliquent sur l'image survolée. Vous pouvez cliquer sur le bouton Parcourir pour localiser une autre page de votre site ou entrer une URL. Remarque: Si vous créez un lien vers un autre site Web, vous devez inclure le préfixe // au début de l'URL.

Si vous n'avez pas encore de lien réel à utiliser pour un bouton ou un lien hypertexte, vous pouvez entrer un signe dièse (#) pour créer un lien mort. Le lien ou le bouton semble cliquable mais ne va nulle part lorsqu'on clique dessus. Cette option est mieux que de cliquer sur la barre d'espace pour créer un espace vide en tant que lien, car cela affichera une erreur Page introuvable.

8Cliquez sur OK.

L'image de survol est créée sur la page.

9Prévisualiser l'image.

Pour prévisualiser la nouvelle image de survol, choisissez Fichier → Aperçu dans le navigateur ou cliquez sur le bouton Affichage en direct dans la barre d'outils du document.