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

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

This simplified variation of example #3 was written by hand. It does not use the sophisticated object-property and programming features as would be inserted by Dreamweaver; however it is easier to understand. With JavaScript instructions located near the beginning in the </head> section of this Web page, a new instance of the image object is defined for the blank (solid white) square graphic and for each of the six colored stars. The source property (.src) for each image object instance is assigned the name of the file containing the respective image. For example:

• bluestar = new Image(); creates a new instance of the image object for the blue star.
• bluestar.src = "starblue.gif"; stores the name of the file containing the blue star into the source property of the bluestar instance.
• goldstar = new Image(); creates a new instance of the image object for the gold star.
• goldstar.src = "stargold.gif"; stores the name of the file containing the blue star into the source property of the goldstar instance.
• and so on.

In this example, the onMouseOver event-handlers call the "display_image" function and supply it with only one piece of information.

• For each link in the left-hand column, the onMouseOver event-handler calls the "display_image" function and supplies it with the literal image-file name, passed as a text string to the "display_image" function. (eg. 'starblue.gif').
• For each link in the right-hand column, the onMouseOver event-handler calls the "display_image" function and passes to it the image object property "variable name" (eg. bluestar.src), whose value is the literal image-file name (eg. 'starblue.gif').

Instead of having the OnMouseOut event-handlers also call the "display_image" function and supply it with the literal image-file name containing the solid white image, I had them call a simpler function I named "reset_starspace", which simply restores the source property of the named image "starspace" to the file-name of the solid white square (starblnk.gif).

The onClick event-handlers simply return a value of false, when invoked. This prevents the page (href="#" link) from being loaded if the user clicks on a star name. (The onClick="return false;" is not a feature supplied by Dreamweaver.)

Return to Having Fun with JavaScript.