About Image Maps

Image maps are images that allow you to hyperlink to various web locations depending on the image spot that you click. Unlike a .gif or .jpg file that is surrounded by an anchor tag, the image map breaks a graphic into discrete regions as a map of individual hyperlinks. In the workshop, we will create the following imagemap:

To build a clickable map, you must:

Create or locate a usable image. We will use the image file on the Project Images Page in the workshop.
Create the "map file" which defines the pixel coordinates of each point on the boundary of the regions you want to create. This can be done by a variety of shareware applications such as MapEdit for Windows or WebMap for the Macintosh.
Establish the HTML information in your WWW page (advanced.html) to link the image and the map file.

To create a image map in your advanced.html document, you will need to:

Using your image map application, open the image file, sample.gif and create the map coordinates file, sample.map. You now have a copy of sample.gif showing and are ready to define the clickable areas.
Select a definition tool (circle, rectangle, or polygon). Using your mouse, define the area and set the URL. For the workshop, set the following URLs with the appropriate areas:

http://www.mtsu.edu/~htmlclas
http://www.mtsu.edu
http://yourfavoritesite
Set the default URL to the following:

http://www.mtsu.edu/~youraccountname/yourfilename
Save the text file with the URLs to the file named sample.map.
FTP both sample.gif and sample.map to your account and change the read permissions on the files.
Edit your HTML file to include the necessary HTML for the image map. Add an imagecalled sample.gif with the ISMAP attribute and create a link to the href listed in the HTML section below.

<A HREF="http://www.mtsu.edu/cgi-bin/imagemap/~youraccount/sample.map">
<IMG SRC="sample.gif" ISMAP></A>
Save your changes. Now you are ready to load your page in Netscape and test it!