Create Rollover Image in Dreamweaver

By: Staff Date: March 05, 2006 Recommended by: readers | Level: Intermediate

You can very easily create rollover image inside Macromedia Dreamweaver by using object "Rollover Image". Now if you don't know what is rollover image all we can tell you is that when user place mouse over rollover image she will swamp with another one (seems very complicate, well it's not). Rollover Images (or "rollovers" as we'll call them) are popular because they give the image a live feeling... they indicate that something will happen when you click on it.

The image rollover is a very common effect seen on many web pages. Despite this, it can still be used to great effect and is particularly useful for navigation buttons.Now to insert rollover image you need to have two images with same image weight and height (You have those images, than fallow next steps).

1. Place cursor of mouse on place where you want to insert your rollover image,
2. Click on object "Rollover Image" on pallet line "Insert" or choose Insert --> Interactive Images --> Rollover Image. New windows will show up with necessary options for your Rollover Image,
3. In text field "Image Name" write image name (it's not important which name you will insert, just avoid special characters (@ # $ %),
4. Now you need to insert your two images. Click Browse button and insert images for Original Image and Rollover image,
5. If you want that this image been written in user browser cache than you need to check field "Preload Rollover Image". This option increase possibility that user waits until rollover image preloads when he or she place mouse over original image,
6. In field "When clicked, Go to URL:" you need to insert URL location for your rollover image so when user click on that image he or she will be taken to setup location. You can click Browse... button and find specific page or you can insert named anchor if your setup location in on the same page as rollover image,
7. For Alternative text you can write whatever you want but we suggest that you insert text which describes your image as much is possible, but don't use more than 15-20 characters (this is your choice and it's not necessary to insert alternative text but this will help you to get better search racking and also you will help to those users which are using older browsers because they will not see your rollover image; they will see only alternative text)
8. After you finish all you have to do is to click on OK button.

We hope that this text was helpful to you. If you have any doubts or problems with rollover image please post it on our Dreamweaver forums.
You can also create Rollover image without Dreamweaver by using JavaScripts. To do that click here to learn more.

Digg this!

Add to del.icio.us

Slashdot it!

Furl it!