Image Maps

ImageMap example - click on one of the four quadrants:

How it works:

The example above uses two files with base names of square, e.g., square.map, and square.gif. If you had a picture of a cat, you could name your files cat.gif and cat.map.

Two files form the core of a successful image map:

A picture, usually a Compu$erve format (.gif) file, that like that displayed above. Although your picture can be as large (file size) as you like, keeping the file size low will be appreciated by your visitors (fast loading).

A .map file, which defines the appropriate .html file to load when a specific area of your picture is clicked on. Finding the proper coordinates is tedious for humans, so we recommend using a map editing program. You might try WebMap if you're using a Mac or MapEdit for Windows95 users.

Here's the text in the square.map file used in the example above:

# Lines starting with a # are comments
# Optional: Which file is opened when someone clicks an undefined area of your picture
default default.html
# What file is called when you pick the upper left, red square
rect http://www.wco.com/~login/red.html 0, 1 75, 69
# What file is called when you pick the upper right, green square
rect http://www.wco.com/~login/green.html 78, 2 150, 69
# What file is called when you pick the lower left, yellow square
rect http://www.wco.com/~login/yellow.html 1, 70 76, 139
# What file is called when you pick the lower right, blue square
rect http://www.wco.com/~login/blue.html 80, 72 150, 140

The red.html, green.html, yellow.html, and blue.html are the files loaded upon a click inside the the rectangular area defined by the numbers in the .map file. Here's the 'active' part of each of the the four html 'work' files:

You clicked a (RED/BLUE/GREEN/YELLOW) square!
< A HREF="../imagemap.html" > Go back < /A > ...

So, to make this image map example above, we needed the square.gif file to provide the picture, and the square.map file to define the rules as to when our four work files will be called. We also need a parent .html file, in our case imagemap.html to invoke our imagemap. For the example above, the active part of our (parent) imagemap.html file is:
< A HREF="http://www.wco.com/~your_login_name/square.map" >
< IMG SRC="/~your_login_name/square.gif" ISMAP > < /A >

The directory/files used to make this imagemap:

pwd