Production principle
The principle of making swap images is the tool Swap image applied to the behavior panel in Dreamweaver. Set it so that when the mouse hovers over a certain button image, let the button itself realize an image exchange (exchanged into a picture with yellow text), and at the same time design the exchange of pointer images (exchanged into a pointer pointing to the current Button pointer picture) to achieve the above effect.
^-^: In fact, some things on the webpage seem to be very mysterious, but at the root of it, it is just a simple change of a few pictures or a few layers.
crafting materials
What is demonstrated here is the flipping of 7 button pictures, so we need to create a total of 21 pictures, 14 button pictures and 7 pointer pictures, to achieve the effect shown. Among them, 7 front button pictures are named B1-1~B1-7 respectively, 7 background button pictures are named B2-1~B2-7 respectively, and 7 pointer pictures are named Z1~Z7 respectively, and their pointers point to Buttons one through seven. You can use image creation software such as Fireworks to create button images.
Preparation method
1. Create a web page file.
2. Insert a 7×2 table and merge the left column of tables to insert the pointer picture. The seven tables on the right are used to insert button images.
3. Insert the first pointer picture Z1 in the table on the left, and insert the blue front buttons B1-1~B1-7 in the 7 rows of cells on the right (the effect is shown in Figure 2).
4. Click "Window (Windows) → Behavior" to bring up the behavior panel.
5. Select the first picture to set the behavior. Here is the button picture with "Guiding Idea" written on it, which is picture B1-1.
6. Click the plus button and select Swap image in the pop-up menu to pop up the swap image dialog box. The main part of our settings will be done in this dialog box.
7. Click the browse button in the dialog box, and then select the destination image that the button image will be flipped into. In this case, it is the button image with yellow text, which is image B2-1. Then click OK.
8. Repeat step 6, select the pointer picture Z1 in the text box of the image, and then click the browse button again to flip it to the first pointer file, Z1. Click OK. After completing the above operations, the display results on the behavior panel are shown in Figure 3.
9. Select the second button picture B1-2, flip it into button B2-2 according to the above method, and flip the pointer picture into the second pointer picture Z2.
10. Follow the above steps and set the following 5 pictures to the behavior of exchanging images.
11. Press F12 to preview and hover the mouse pointer over each picture. How about it? It feels good, right?