Principe de fabrication
Le principe de création d'images d'échange est l'outil Swap image appliqué au panneau de comportement de Dreamweaver. Réglez-le de sorte que lorsque la souris survole une certaine image de bouton, laissez le bouton lui-même réaliser un échange d'images (échangé en une image avec du texte jaune), et en même temps concevez l'échange d'images de pointeur (échangées en un pointeur pointant vers l'image actuelle du pointeur du bouton) pour obtenir l'effet ci-dessus.
^-^ : En fait, certaines choses sur la page Web semblent très mystérieuses, mais à la base, il s'agit simplement d'un simple changement de quelques images ou de quelques calques.
matériaux de fabrication
Ce qui est démontré ici est le retournement d'images à 7 boutons, nous devons donc créer un total de 21 images, 14 images à boutons et 7 images à pointeur, pour obtenir l'effet montré. Parmi eux, 7 images de boutons avant sont nommées respectivement B1-1 ~ B1-7, 7 images de boutons d'arrière-plan sont nommées respectivement B2-1 ~ B2-7 et 7 images de pointeurs sont nommées respectivement Z1 ~ Z7, et leurs pointeurs pointent vers les boutons. un à sept. Vous pouvez utiliser un logiciel de création d'images tel que Fireworks pour créer des images de boutons.
Méthode de préparation
1. Créez un fichier de page Web.
2. Insérez un tableau 7 × 2 et fusionnez la colonne de gauche des tableaux pour insérer l'image du pointeur. Les sept tableaux de droite servent à insérer des images de boutons.
3. Insérez la première image de pointeur Z1 dans le tableau de gauche et insérez les boutons avant bleus B1-1 ~ B1-7 dans les 7 rangées de cellules de droite (l'effet est illustré sur la figure 2).
4. Cliquez sur "Fenêtre (Windows) → Comportement" pour afficher le panneau de comportement.
5. Sélectionnez la première image pour définir le comportement. Voici l'image du bouton avec « Idée directrice » écrite dessus, qui est l'image B1-1.
6. Cliquez sur le bouton plus et sélectionnez Échanger l'image dans le menu contextuel pour faire apparaître la boîte de dialogue d'échange d'image. L'essentiel de nos réglages se fera dans cette boîte de dialogue.
7. Cliquez sur le bouton Parcourir dans la boîte de dialogue, puis sélectionnez l'image de destination dans laquelle l'image du bouton sera retournée. Dans ce cas, il s'agit de l'image du bouton avec du texte jaune, qui est l'image B2-1. Cliquez ensuite sur OK.
8. Répétez l'étape 6, sélectionnez l'image du pointeur Z1 dans la zone de texte de l'image, puis cliquez à nouveau sur le bouton Parcourir pour le faire basculer vers le premier fichier de pointeur, Z1. Cliquez sur OK. Après avoir terminé les opérations ci-dessus, les résultats d'affichage sur le panneau de comportement sont présentés dans la figure 3.
9. Sélectionnez la deuxième image de bouton B1-2, retournez-la en bouton B2-2 selon la méthode ci-dessus et retournez l'image de pointeur dans la deuxième image de pointeur Z2.
10. Suivez les étapes ci-dessus et définissez les 5 images suivantes sur le comportement d'échange d'images.
11. Appuyez sur F12 pour prévisualiser et passez le pointeur de la souris sur chaque image. Et si, ça fait du bien, n'est-ce pas ?