Creating Rollover Behavior in Adobe Dreamweaver Using Images

Today we are going to do some Dreamweaver work. Though it will look basic thing which I’m going to tell you. But for new designers it will be very useful. We are going to make Rollover Behavior in Dreamweaver. Rollover images are when you bring your mouse pointer to any button, it will change its behavior and show you another image.

1. First of all we are going to make two image, one for Normal and one for Rollover. Here are two images which I’m going to use, I’ve made these buttons in Photoshop:

Adobe Dreamweaver Using Images

Adobe Dreamweaver Using Images

2. In Dreamweaver, take any new HTML file (save it and don’t forget to paste your both images on same location where you are saving this file), Now I’m going to insert a table in which I’ll call these two images. Run the command Insert >> Table and write 1 in Row and 1 in Column, give the width of table as the width of image, as I’ve taken 200px wide image so given 200 in Table width, no need to take border so I’ve written 0 in border:

Creating Rollover Behavior

3. As the width of our image is 200px and height is 30px so I’m giving the height of table to 30px:

Creating Rollover Behavior

4. Now click inside the table to bring Cursor and run the command Insert >> Image Objects>> Rollover Image, a box will appear, give these in relevant boxes:

Image name = Type any name I typed Rollover image
Original Image = Give your normal image here, you can select by hitting its Browse… button
Rollover Image = Here select your second image, which will be used for Rollover
Preload rollover image = Always try to check this option, it will download rollover image when page is being downloaded, other wise when you bring mouse pointer over the button, then Rollover image will start downloading.
Alternate Text = Here you can type any text, it will be used for Alt text, mean in any browser when mouse pointer will come over it, this text will be displayed as tool tip.
URL = Here type the name of any location or file which you want to open when anybody will click on it. I’m going to open Stunning Mesh’s website so I’ve typed,

Creating Rollover Behavior

Now Press OK. Save the file and then press F12 key to see the result in your Default Browser.

A professional Web/Graphic Designer, working as Freelancer since 2000. Designing is my passion, blogging is my hobby.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top