Web Design Version 1.6

Using JavaScript with an image map

An image map is a series of links (connected to other web content…like webpages) made accessible through a picture. While it is a simple task to link an image to another location, mapping coordinates (or hotspots) to an image map and linking those to multiple locations can be tricky. Adding JavaScript to the mix tends to complicate things further. However, in the end, an image map provides access to several Internet sites in an attractive and interesting manner. Therefore, to create an image map an image map editor is recommended. Map This by Todd Wilson is a freeware program that makes a tricky task simple. To create an image map using this program:

Part I - Preliminaries

1) Create or locate a suitable image, 2) Start the program, 3) Choose File > New…, 4) Load an image, 5) Use the toolbar (circle, rectangle, polygon…for irregularly shaped areas) to create hotspots on the image. Tip: Select File > Preferences… and ensure that a checkmark appears next to Prompt for New Area Info. Upon completing the hotspots: 1) Select File > Save As…, 2) Complete default URL (i.e. a cool website) and ensure that NCSA is selected, 3) Select HTML using the format somename.html from the Save the Image Map File window.

Part II – Using the HTML file

Once you have saved the image map html file you will need to open it using notepad and extract certain information. Other information will be included, however, and other than giving Todd Wilson credit, the additional information will only inevitably make your HTML more confused. Therefore, after opening the file, adjust the info found therein to roughly match the example below. Bold italicized info represents data that may need to be modified. The map name tag must match the #usemap attribute found in the img src tag. The name attribute found in the img src name attribute must match the underlined JavaScript property located within the italicized JavaScript.

<HTML>
<HEAD>
<TITLE>Image Map Example</TITLE>
</HEAD>

<BODY>

<MAP NAME="source">

<AREA SHAPE=CIRCLE COORDS="80,75,13" HREF="http://www.lightlink.com/grotonhs/" onmouseover="document.map.src='map2.gif'" onmouseout="document.map.src='map1.gif'">

<AREA SHAPE=CIRCLE COORDS="213,72,13" HREF="http://www.lightlink.com/coachmol/" onmouseover="document.map.src='map3.gif'" onmouseout="document.map.src='map1.gif'">

<AREA SHAPE=POLY COORDS="148,139,134,174,161,174,148,139" HREF="http://www.lightlink.com/" onmouseover="document.map.src='map4.gif'" onmouseout="document.map.src='map1.gif'">

</MAP>

<img src="map1.gif" name="map" usemap="#source">

</BODY>

</HTML>

An operational example of this HTML may be found at : http://www.lightlink.com/coachmol/school/jsinfo/map.html

Home