Didacticiel sur la création d'une image de survol dans Dreamweaver

Une image de survol est une image qui change en une autre image lorsque vous ou votre client passez la souris dessus. Ceux-ci sont couramment utilisés pour créer une sensation interactive telle que des boutons ou des onglets. Mais vous pouvez créer des images de survol à partir de n'importe quoi.

Ce didacticiel est conçu pour vous aider à créer une image de survol dans Dreamweaver. Il est destiné aux utilisateurs des versions suivantes de Dreamweaver:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

Conditions requises pour ce tutoriel

• DreamweaverUne des versions listées ci-dessus.
• Une image originaleAssurez-vous d'optimiser cette image. Cela aidera vos pages à charger plus rapidement.
• L'image de survolCette image doit avoir les mêmes dimensions que l'image d'origine. Et, à l'image de l'image d'origine, doit être optimisé pour réduire le temps de chargement des pages.
• Une page webCeci est la page HTML où vous placerez votre image de survol.

Commencer

1. Démarrer Dreamweaver
2. Ouvrez la page Web où vous souhaitez que votre survol

Insérer un objet image de survol

Dreamweaver facilite la création d’une image de survol.

1. Allez au menu Insertion et au bas de la Objets d'image sous-menu.
2. Sélectionner Survol d'image ou Image de survol.

Certaines versions plus anciennes de Dreamweaver appellent les objets image «images interactives».

Indiquer à Dreamweaver les images à utiliser

Dreamweaver ouvre une boîte de dialogue avec les champs à remplir pour créer votre image de survol.

Nom de l'image

Choisissez un nom d'image unique pour la page. Ce doit être un seul mot, mais vous pouvez utiliser des nombres, des traits de soulignement (_) et des traits d'union (-). Ceci sera utilisé pour identifier l'image à changer.

Image originale

C'est l'URL ou l'emplacement de l'image qui va commencer sur la page. Vous pouvez utiliser des URL de chemin d'accès relatif ou absolu dans ce champ. Cela doit être une image qui existe sur votre serveur Web ou que vous allez télécharger avec la page.

Image survolée

Ceci est l'image qui apparaîtra lorsque vous passez la souris sur l'image. Tout comme l'image d'origine, il peut s'agir d'un chemin absolu ou relatif vers l'image. Il doit exister ou être chargé lors du téléchargement de la page.

Précharger l'image de roulement

Cette option est sélectionnée par défaut car elle permet d’apparaître plus rapidement au survol. En choisissant de précharger l'image de survol, le navigateur Web la stockera dans une mémoire cache jusqu'à ce que la souris la survole.

Texte alternatif

Un bon texte alternatif rend vos images plus accessibles. Vous devez toujours utiliser un type de texte alternatif lorsque vous ajoutez des images.

Lorsque vous cliquez dessus, allez à l'URL

La plupart des gens cliquent sur une image quand ils en voient une sur une page. Vous devriez donc avoir l’habitude de les rendre cliquables. Cette option vous permet de spécifier la page ou l'URL à laquelle amener le spectateur lorsqu'il clique sur l'image. Mais cette option n’est pas nécessaire pour créer une substitution.

Lorsque vous avez rempli tous les champs, cliquez sur D'accord que Dreamweaver crée votre image de survol.

Dreamweaver écrit le JavaScript pour vous

Si vous ouvrez la page en mode Code, vous verrez que Dreamweaver insère un bloc de JavaScript dans le de votre document HTML. Ce bloc inclut les 3 fonctions nécessaires pour que les images soient échangées lorsque la souris les survole et la fonction de préchargement si vous avez opté pour cela.

fonction MM_swapImgRestore ()fonction MM_findObj (n, d)fonction MM_swapImage ()fonction MM_preloadImages ()

Dreamweaver ajoute le code HTML pour le survol

Si vous avez choisi de laisser Dreamweaver précharger les images survolées, le code HTML apparaît dans le corps du document pour appeler le script de préchargement afin que vos images se chargent plus rapidement.

onload = "MM_preloadImages ('shasta2.jpg')"

Dreamweaver ajoute également tout le code de votre image et la lie (si vous avez inclus une URL). La partie de survol est ajoutée à la balise d'ancrage en tant qu'attributs onmouseover et onmouseout.

onmouseout = "MM_swapImgRestore ()"onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"

Testez le roulement

Visualisez l’image de survol entièrement fonctionnelle et découvrez ce que Shasta a en tête.