Comment créer un Disjointed Rollover

Création des Images Disjointed Rollover

1. Créez les images de survol disjointes dans votre logiciel d'édition d'image préféré.

2. Faire deux boutons: l'un qui affiche votre bouton de substitution décousue dans un état normal (quand il n'y a pas d'effet de survol de la souris), et qui affiche un cours de l'effet de survol de la souris (quand quelqu'un roule sur l'image ou clique dessus).

3. Changez la couleur et le texte des deux boutons de renversement disjointes, mais gardez-les de la même taille. Une fois que vous êtes satisfait de la façon dont ils regardent, enregistrer chaque forme de fichiers image au Web en format .jpg, .gif ou .png.

4. Créer des images supplémentaires que vous souhaitez utiliser pour des boutons de renversement disjointes.

Mettre les roulements disjoints en action

1. 
   
   
   

   Ouvrez votre document HTML dans Dreamweaver. Cliquez dans la zone où vous souhaitez ajouter l'image de survol décousue à apparaître.

2. Sélectionner "Insertion, Image" à partir de la barre d'outils pour insérer votre image dans votre page Dreamweaver. Trouver l'image que vous souhaitez utiliser dans le "Sélectionnez Image Source" boîte de dialogue et double-cliquez dessus. Ce sera l'image de votre roulement décousue dans un état normal. Ajoutez un texte alternatif et description longue pour l'image (en option) et cliquez sur "D'ACCORD."

3. Allez à la "Propriétés" fenêtre et le nom de votre image dans la boîte de nom, donc vous pouvez pointer à l'image plus facilement lorsque vous configurez son comportement (comment les fonctions de survol disjointes sur le web).

4. Ajouter des images supplémentaires que vous souhaitez utiliser et répétez l'étape 3 de nommer les images.

5. Ouvrez votre panneau de droite, si elle est cachée en appuyant sur F4 ou en cliquant sur la flèche de la barre de défilement du panneau. Sélectionnez le "Comportements" panneau pour l'ouvrir.

6. 
   
   
   

   Cliquez sur le "Ajouter Comportement" bouton ou signe plus pour l'ouvrir. Choisir "Swap image" dans la liste déroulante.

7. Sélectionnez la première image que vous souhaitez échanger à partir de la liste et cliquez sur "Parcourir." Naviguez pour trouver la deuxième image que vous avez créé dans "Section 1, étape 3" et l'ouvrir. Laisser "image de préchargement" et "restaurer des images sur mouseout" cochée sauf si vous voulez les régler manuellement.

8. Définir les états des boutons spécifiques à l'image en cliquant sur le menu déroulant à côté "Swap image" ou "Swap Image survolée" ou les laisser tels quels.

9. Répétez les étapes 6 à 8 pour toutes les images de survol disjointes supplémentaires que vous souhaitez créer.

10. Enregistrez votre page web dans Dreamweaver et la prévisualiser dans votre navigateur Web. Ensuite, tester votre bouton de substitution décousue pour voir comment cela fonctionne. Félicitations! Vous venez de créer un bouton de substitution décousue.