Pass the mouse pointer over the text below to display graphics in a specific area. View source.

Blue Star Gold Star Green Star Purple Star Silver Star Yellow Star

This example uses the onMouseOver event-handler and the function "MM_swapImage()" to display (swap) colored stars in place of an initial image of a solid white square. The onMouseOut event-handler and the function "MM_swapImgRestore()" restore (swap back) the solid white square.

The HTML border attribute of the image <img> tag has been set to 1 (border=1) so that a thin line is shown around the image space, simply to make its location visible. The onMouseOver event-handler calls the MM_swapImgRestore function with information which changes the name of the image displayed. For example, when the mouse pointer is passed over the "Blue Star" link, the onMouseOver event-handler calls the MM_swapImage() function, and passes to it information which will cause the solid white square image to be replaced with the blue star image. When the mouse pointer is passed off of the "Blue Star" link, the onMouseOut event-handler calls the MM_swapImgRestore() function to restore the image of the solid white square.

When the page is fetched by the browser, a solid white image (starblnk.gif) is loaded by the HTML <img> (image) tag, and the image space is given the name starspace. When the browser has finished loading the Web page, the onLoad event-handler initiates repeated calls to the "MM_preloadImages" function which fetches each of the colored star image files. The images are saved within an array for systematic retrieval and display. Pre-loading the images enables a much more rapid exchange of images subsequently. The onMouseOver event-handler exchanges a colored star image for the solid white image within the named image starspace. The onMouseOut event-handler restores starspace to the original solid white image. The JavaScript event-handlers and functions were inserted automatically into the HTML file by Dreamweaver as the behaviors were assigned to the colored star links.

Download a self-extracting zip-file which contains the HTML portion of Example 3 with instructions for building this example with Dreamweaver. The zip-file contains the HTML file (example3b.htm) and the seven .gif image files (starblnk.gif, starblue.gif, stargold.gif, stargren.gif, starpurp.gif, starslvr.gif, staryell.gif).

1. Please read these instructions before clicking on the link above to initiate the download.
2. After you click on the link above, you will be asked to specify a destination directory into which the self-extracting zip-file will be stored. You can either type in a directory path or navigate to an existing directory. (You could even create a new directory into which this file will be stored.)
3. After the download finishes, run (execute) the self-extracting zip-file to unpack and save example3b.htm and the .gif image files.
   • If you know where the file has been saved, click on Start, then Run. Either specify the directory path or use "Browse" to navigate to the file example3.exe, and open it. Click on the OK button to run it.
   • If you're not sure where the self-extracting zip-file has been saved, click on Start, then Find, then Files or Folders, and specify example3.exe for Named:, and (C:) for Look in:. After Find displays the found file example3.exe, double-click on the name "example3.exe" to run it.
4. As the zip-file begins to run, it will ask you to specify a destination directory into which example3b.htm and the .gif files can be saved. As before, you can either type in a directory path or navigate to an existing directory. (You could even create a new directory into which this file will be stored.)
5. When example3b.htm has been saved, open example3b.htm with Dreamweaver and have fun making the enhancements.

Return to Having Fun with JavaScript.