The area element (as used in Client Side Image maps) currently supports two scripting events. Both are currently only supported by Netscape.

OnMouseOver
As we've previously seen, this scripting event executes a script when the mouse is passed over the element. In this case, it would execute a script when the mouse passes over a hot-spot as defined in a client side image map. For example, consider an image map, whose AREA section is defined as :

<AREA SHAPE="poly" COORDS="56,23, 85,38, 110,18, 93,78, 17,84, 68,55" HREF="going_nowhere.htm">

If we add the OnMouseOver event to the <AREA> element :

<AREA SHAPE="poly" COORDS="56,23, 85,38, 110,18, 93,78, 17,84, 68,55" HREF="going_nowhere.htm" OnMouseOver="alert('You are in the hot-spot')">

Then when the mouse passes over the hot-spot (in Netscape only), the alert 'You are in the hot-spot' will be displayed.

OnMouseOut
As the opposite of OnMouseOver, this event can be used to execute a script when the mouse leaves the hot-spot as defined in the <AREA> element.

Although not officially documented (by either Netscape, or Microsoft), there is a way to force the <AREA> element to use the OnClick event (NOTE : The OnClick event is covered for the <AREA> element in the W3C Cougar HTML specification). If the image that uses the map is defined as a hypertext link, then the OnClick event of the <A> element can be used. For example, using the above <MAP> and <AREA> definitions to define an image map, which is used in a standard <IMG> element, but surrounding it with a hypertext link, like :

<A HREF="#nowhere" OnClick="alert('Ow, you clicked me')"><IMG SRC="../images/poly.gif" USEMAP="#poly" WIDTH="134" HEIGHT="100" ALT="Polygon image map" BORDER="0"></A>

renders the image as an image map, which now supports the OnClick event. As far as Internet Explorer is concerned, the whole image uses the OnClick event (try it below), since the whole image is the anchor. Interestingly however, Netscape will only activate the code defined by the OnClick event of the anchor when the actual hot-spot(s) of the image map are clicked on. So, even though <AREA> does not directly support the OnClick event, it can be made to act like it does. Also note that Netscape will navigate to the URL's specified in the <AREA> definitions, not the URL given in the <A HREF="..."> link, so a dummy link can be provided here, although a link is necessary to force the OnClick event to work.

Polygon image map


Scripting the <A> element Scripting Reference Overview Scripting the <BODY> element