JavaScript

Notes from the ZDU JavaScript workshop.

Image-Map Rollovers

Creating a set of popup images that appear when you mouse over different regions of an image map.

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.