Dreamweaver making complex exchange images

Production effect

We're going to create a picture of a list of 7 buttons and add a pointer to the front of the button picture in this column, and the effect we're going to make is when we move the mouse to a button picture, the text on the button changes color. And the pointer points to the picture (the effect is shown in Figure 1).

Figure 1

Production principle

The principle of the swap image is a tool that is applied to the flip image (swap images) on the behavior panel in Dreamweaver. Set it to be when the mouse hovers over a picture of a button, so that the button itself realizes an exchange of the image (swapping it into a picture of yellow text), while designing the exchange of the pointer image (swapping it into the pointer picture of the current button) to achieve the above effect.

^-^: Some things on the Web page seem mysterious, but the root of it is simply a few pictures or a few layers of simple changes.

Making materials

Here is a demo of the 7 button image Flip, so we need 14 button pictures and 7 pointer pictures A total of 21 pictures of the production to achieve the results shown. Among them, 7 front button pictures named b1-1~b1-7,7 background button picture respectively named B2-1~b2-7, of which 7 pointer pictures are named Z1~Z7 respectively, their pointers to the first to seventh button. You can use fireworks and other picture making software to make button pictures.

Making method

1, the establishment of Web page files.

2. Insert a 7-by-2 table and merge the table on the left to insert the pointer picture. And the seven tables on the right are used to insert the button picture.

3, in the left table insert the first pointer picture Z1, in the right 7 rows of cells inserted into the Blue foreground button b1-1~b1-7 (the effect is shown in Figure 2).

Figure 2

4, click "Window (Windows) → behavior", call up the behavior panel.

5, select the first to set the behavior of the picture, here is written with "guiding ideology" of the button picture, that is, picture b1-1.

6, click the Plus button, under the pop-up menu to select the swap image (swap images), Pop-up Exchange Image dialog box. The settings for our main section will be in this dialog box.

7, click the Browse button in the dialog box, and then select the button image will be flipped into the destination picture, in this case is a yellow text button picture, that is, picture b2-1. then click OK.

8, repeat the 6th step of the operation, in the Image text box select the pointer picture Z1, and then click the Browse button again, flip it into the 1th pointer file, that is Z1. Click OK. When you have done this, the results shown in the behavior panel are shown in Figure 3.

Figure 3

9, select the 2nd button picture B1-2, in accordance with the above method to flip it itself into a button b2-2, and the pointer to flip the picture to the number 2nd pointer picture Z2.

10, according to the above steps, respectively, the following 5 pictures are set up to exchange images of the behavior.

11, press F12 preview, the mouse pointer hover over each picture, how, feel good?