Sometimes you may find that when your mouse rolls over an image, the image will change into another. This change is due to inserting rollover images. Rollover images mean that the original image will become another image when the mouse passes by. In fact rollover images consist of two images—original image and rollover image. The two images must be in the same size. If the rollover image is different from the original image, Dreamweaver8.0 will adjust the size of the second image.
The specific steps are as follow.
Step1:
Open the web page you used to build.
Step2:
Set focus to the location that needs to be inserted rollover images. Then you can click the menu “INSERT”, choose [image objects]-[rollover image]. There will be an “INSERT ROLLOVER IMAGE” dialog box appearing. Open the dialog box, and click the “Browse” button, at the right of “original image” textbox. Open the “ORIGINAL IMAGE” dialog box.
Step3:
In the dialog box, choose the original image, click “OK” button and put the image into the textbox. Click the “browse” button, at the right of the “rollover image” button, and open the “rollover image” dialog box.
Step4:
Choose the rollover image in the “rollover image” dialog box, and click “OK” button to put the image into the textbox. Choose the check box “preload rollover image”.
Srep5:
Click “OK”, and insert the rollover image.
The properties of the “INSERT ROLLOVER IMAGE” dialog box are as the following words showing:
[Image name]: the name of the image of mouse passing.
[Original image]: default image.
[Rollover image]: the image of mouse passing-by
[Alternate text]: the words before images appear.
[When clicked, go to URL]: when the mouse clicks the location of the images, the link will affect.
Step6:
Save the html. Press <F12> to preview the impact in the Internet Explorer. The image before mouse passing is like picture1, and rollover image is like picture2.
Pic1:
Pic2:
In the end, a rollover image is OK.
For help, advice, tips and tricks, challenges, feel free to visit our
or Submit your good resource to share.
Reminder: Unless stated otherwise, all resources published on this site are NOT for commercial use. To use any resource from this site for commercial purposes, please contact the author.
