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:
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:
3. As the width of our image is 200px and height is 30px so I’m giving the height of table to 30px:
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, https://www.stunningmesh.com
Now Press OK. Save the file and then press F12 key to see the result in your Default Browser.
About The Author
