Using rollover techniques for dynamic graphics

In this example the image BasicAreas.gif is shown when the page is displayed.

A HotSpot is drawn over the entire area of BasicAreas.gif - its onMouseOver event changes the image source from BasicAreas.gif to AreaPointedAt.gif. This tells the user that the image is pointed at. The onMouseOut event restores the image's source to BasicAreas.gif.

Two further HotSpots area created over AREA ONE and AREA TWO on the image. The onMouseOver events for these HotSpots change the source to images which highlight AREA ONE or AREA TWO. onMouseOut restores BasicAreas.gif.

This works best when the images are preloaded. If you're using a WYSIWYG HTML editor like Dreamweaver or FrontPage, don't forget that, if you move files around, the application will update the path to BasicAreas.gif in HTML but not necessarily the other paths, like javascript:RolloverImage.src = '../Images/Programming/AreaOne.gif'.

THE HTML

<IMG SRC="../../../Images/Programming/BasicAreas.gif"
        WIDTH="400"
        HEIGHT="268"
        USEMAP="#RolloverMap"
        BORDER="0"
        NAME="RolloverImage">
        <MAP NAME="RolloverMap">
    
    <AREA SHAPE="RECT" COORDS="51,148,177,225"
        HREF="#" ALT="Pointing at Area One" TITLE="Pointing at Area One"
        onMouseOver="javascript:RolloverImage.src='../../../Images/Programming/AreaOne.gif';"
        onMouseOut="javascript:RolloverImage.src='../../../Images/Programming/BasicAreas.gif';">
    
    <AREA SHAPE="RECT" COORDS="234,148,360,225"
        HREF="#" ALT="Pointing at Area Two" TITLE="Pointing at Area Two"
        onMouseOver="javascript:RolloverImage.src='../../../Images/Programming/AreaTwo.gif';"
        onMouseOut="javascript:RolloverImage.src='../../../Images/Programming/BasicAreas.gif';">
    
    <AREA SHAPE="RECT" COORDS="1,1,399,269"
        HREF="#" ALT="Pointing at the image area" TITLE="Pointing at the image area"
        onMouseOver="javascript:RolloverImage.src='../../../Images/Programming/AreaPointedAt.gif';
        onMouseOut="javascript:RolloverImage.src='../../../Images/Programming/BasicAreas.gif';"
        MM_preloadImages('../../../Images/Programming/AreaOne.gif',
            '../../../Images/Programming/AreaTwo.gif',
            '../../../Images/Programming/AreaPointedAt.gif',
            '../../../Images/Programming/AreaPointedAt.gif')">
    </MAP>

You can, of course, achieve the same results using web development tools - Dreamweaver can help you craft these rollover behavious very simply, as here where I've used the basic Dreamweaver rollover support, including the MM_PreLoadImages() function , or can be used to create the complete effect. But having an understanding of how the code works can be an enormous benefit if you're trying to work out why your rollovers don't work!