• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

Macromedia Dreamweaver 8 Chapter 12 of this Visual QuickStart book covers "Adding Rollovers" on page 340.

Examine the Code for the Rollover Images Using Dreamweaver

In the last lesson, we had used Dreamweaver to create an rollover button. Now we'll examine the code that Dreamweaver had written.

1. Dreamweaver had created an <img> tag bounded by an anchor tag <a> as shown...

2. As you can see from the image tag ...

Dreamweaver had filled in the attributes by detecting the height and width of the image. It used the button name that you supplied for the name and id attribute. The alternate text that you supplied was used for the alt attribute. The src attribute is set to the image that has the default state of the button. As is standard for a linked graphic, the border attribute is set to zero.

3. As you can see from the anchor tag...

we got the href attribute set to the destination URL. The mouseout and mouseover events inserted in this tag is what makes the rollover happen.

When user hovers over the button, the Javascript in the mouseover event is activated. In this case, the function MM_swapImage. Passing into this function is image file of the hover state button_hover.gif.

When the mouse is move out of the button, the Javascript function MM_swapImgRestore() is called to return the button back to its original state.

4. Because we had checkmarked Preload Rollover Image in the dialog, Dreamweaver added the onload event handler to the body tag ...

The browser will invoke the funtion MM_preloadImages after it has completed loading of the page. This function will cause the browser to load the button_hover.gif image at this time instead of waiting for when the user hovers over the button. The makes the initial rollover effect more smooth and is recommended.

5. Where are these functions defined? Dreamweaver had inserted these function definitions in the head section of the page...

If you are using rollover button on multiple pages, you can move these functions to an external Javascript file.

Next Lesson:

Instead of using Javascript to implement rollovers, you can also use a combination of Javascxript and CSS as you see in the next lesson.