Comment créer des survols dans Adobe Dreamweaver CS6 - des mannequins

Dans Adobe Dreamweaver CS6, vous pouvez insérer des objets image, y compris des espaces réservés d'image, des images rollover (images qui changent la souris sur l'image), les barres de navigation et le code HTML Fireworks. Vous accédez à ces objets image en sélectionnant Insérer → Objets image.

Pour créer une image survolée, procédez comme suit:

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. Pour de meilleurs résultats, créez des images ayant exactement la même largeur et la même hauteur.

2Placez le curseur sur la page où vous souhaitez que le survol apparaisse et 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 apparaît.

3Tapez un nom d'image sans espace dans le champ de texte Nom de l'image.

Ce nom est utilisé dans le script créant le survol.

4Cliquez sur les boutons Parcourir situés à droite des champs de texte Image originale et Image inversée pour localiser l'image que vous souhaitez afficher par défaut sur la page.

L'image apparaît uniquement lorsque quelqu'un passe le pointeur de 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.

6Type texte alt descriptif approprié.

Bien sûr, vous devez le saisir dans le champ de texte Alt.

7Dans le champ de texte Lorsque cliqué, allez à l'URL, indiquez à Dreamweaver où les spectateurs sont dirigés lorsqu'ils cliquent sur votre image survolée.

Vous pouvez cliquer sur le bouton Parcourir pour localiser une autre page de votre site ou entrer une URL.

Si vous créez un lien vers un site Web différent, vous devez inclure le préfixe // au début de l'URL. Si vous laissez ce champ vide, Dreamweaver ajoutera automatiquement un lien mort (#).

8Cliquez sur OK.

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

9Pour 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.

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 d'appuyer sur la barre d'espace pour créer un espace vide en tant que lien, car ce lien affichera une erreur Page introuvable lors d'un clic.