JavaScript
Image-Map Rollovers
Notes from the ZDU JavaScript workshop.
Creating a set of popup images that appear when you mouse over different regions of an image map.
Displaying the sitemap
First display a centred image on the Web page (sitemap_2.gif).
<div align="center">
<h1>Site Map</h1>
<img src="images/sitemap_2.gif" border="0"><P>
</div>
Site Map
Adding the status-bar messages
Add an img tag (outside the <map> </map/>).
The usemap="#sitemap_2" attribute enables sitemap_2.gif to function as an
image map.
<img src="images/sitemap_2.gif" usemap="#sitemap_2" border="0">
Add a MAP tag:
<map name="sitemap_2">
<!-- A map region -->
<area shape="rect" coords="0,0,40,40"
href="javascript:void(0)"
onMouseOver="window.status='A'; return true">
<!-- B map region -->
<area shape="rect" coords="40,0,80,40"
href="javascript:void(0)"
onMouseOver="window.status='B'; return true">
</map>
Site Map
The area tags define all of the regions of the image map The 'A' AREA
tag uses the shape="rect" attribute to specify the region shape
(rectangle) and the coords attribute to specify the individual points
that define this region. The onMouseOver event handler displays 'A' in
the status bar when the user mouses over any pixel within the defined 'A'
region.
Add JS/HTML code for the popups:
href="javascript:void(0)"
onMouseOver="document.popupImg.src=pu_a.src;
window.status='A'; return true"
onMouseOut="document.popupImg.src=pu_blank.src">
...
Don't forget <img src="images/pu_blank.gif" name="popupImg" border="0"">
Site Map
The img tag defines an image named popupImg and sets its src value to
that of the blank popup image file (pu_blank.gif). The onMouseOver
handler displays the 'A' status-bar message and toggles the blank popup
image (document.popupImg.src) to the preloaded 'A' popup (pu_a.src). The
onMouseOut handler "undoes" the onMouseOver toggle by toggling the 'A'
popup image back to the blank popup image.
