Dreamweaver 4 concise tutorial (8. Add interactive effects to web pages)

Author：Eve Cole Update Time：2009-05-30 18:35:37

8. Add interactive effects to web pages

Create simple interactive effects

We often see this effect on web pages. When the mouse moves over a picture, the original picture switches to another picture. After the mouse is moved away, it returns to its original appearance. How is this done? At the beginning, I mentioned that one of the advantages of Dreamweaver over Frontpage is that Dreamweaver can create interactive web pages. Now, we will use Dreamweaver to create the simplest interactive effect - changing pictures.

Prepare two pictures of the same size, one is before the mouse is moved up, and the other is the picture after the mouse is moved up. For example, in the following two pictures, the left picture is a raised button, and the right picture is a concave button. button:

Click on the Objects panel

, you will see the following dialog box:

① Image Name: The tag name of the transformed image effect, Dreamweaver will automatically assign it;

② Original Image: Specify the original image (for example, this is a raised image)

③ Rollover Image: Specify the image after the mouse is moved up (for example, here is a concave image);

④ Url: the link URL of the image;

For example, after completing the settings as shown above, press OK, and then press F12 to preview the effect.