Making a clickable imagemap

Purdue Engineering Computer Network

---

A clickable image map allows a user to click on any location of a graphic and receive more information in the form of an enlarged picture or a link to a URL or just about anything you want. A clickable image map can help users better understand a picture or diagram by allowing them to click on a particular section of the graphic. For example, they can see an enlarged section of the one particular spot they clicked on.

Here are the steps you need to take when creating a clickable image map in ECN. The steps are:

1. Get an image and figure out where to put the hotspots (the areas that trigger links).

2. Develop an image-map file that describes where each hotspot is located and specifies the URL assocaited with each hotspot.

3. Reference the image map in an HTML document.

4. Test the clickable image map.

Step 1: The Image and Its Hotspots

The graphic must be in GIF format for maximum portability. You can scan photographs to create GIF files or use a software program which will allow you to draw a graphic and save it as a GIF file. Some software will let you save it as an xwd file and then using a filter you can convert the xwd file to a GIF file.

Plan out mentally where you will place the hotspots. Arbitrary rectangles, polygons and circles can be used to identify the hotspots. Remember these hot spots can go to another URL outside of your network.

The shapes used depends on what your graphic represents. The shapes to choose from are circles, polygons and rectangles.

Step 2: Create Your Map File

You need to create a file which will have the "directions" for each clickable image map on your Web server. Each line in an image-map file defines a hotspot by defining an area within the graphic and the corresponding URL to be returned if someone clicks on that area. If you want to include comment lines, begin the line with the pound (#) sign.

Hotspots are formatted as:

	shape URL coordinate-1,coordinate-2...coordinate-n 

where shape is one of the following:

circle

A circle (with two coordinate pairs; center and any edgepoint).

poly

A polygon (with at most 100 vertices; each coordinate is a vertex).

rect

A rectangle (with two coordinate pairs; upper-left and lower-right).

Coordinates are x,y pairs counting in pixels from the upper lefthand corner of the image.

To determine the x,y pixel coordinates, you will need a program which can count your pixels. One such program is ImageMagick. You can use ImageMagick to view the image and it's x,y coordinates to use for mapping the image's hotspots.

Example of ~/public-web/floorplan.map

default http://harbor.ecn.purdue.edu/~debweb/error.message.html
rect	http://harbor.ecn.purdue.edu/~marian/	4,336 28,374
 rect	http://harbor.ecn.purdue.edu/~ghg/	169,403, 195,403 195,432 169,432
 poly	http://www.ecn.purdue.edu/ECN/FAQ/httpd/imagemap/machine.room.gif.html
 119,156 225,157 225,222 219,237 186,237 185,272 117,250 117,187 

The server takes the coordinates from a user's mouse click and steps through the map file to determine if the click is within any hotspots. If a match is found, its corresponding URL is loaded, if no matches are found, a default URL (that you specify in your map file) is returned. There can be only one default per map file. In the example above, if a match is not found, the default is the current an error message.

The file error.message.html is located in my public-web directory. The public-web directory is aliased here at ECN, so when httpd sees a ~login it goes directly to the user's public-web directory.

Step 3: Your HTML File

In this file, you will be referencing your imagemap.

It is best to include inline graphics in your HTML document using the image insertion HTML tag:

	<IMG SRC="URL"> 

You will also need to tell the Web browser accessing the HTML document that the inline image it will display is a clickable image map. This is done by adding the optional ISMAP qualifier to the <IMG> tag:

	<IMG SRC="URL" ISMAP> 

What this does is create a link where this image is the link trigger and the URL invokes the imagemap script and passes it to the map name.

Example of ~/public-web/floorplan.html:

<html>
<head>
<title>MSEE Floorplan</title>
</head>
<body>
<a href="http://harbor.ecn.purdue.edu/cgi-bin/imagemap/~debweb/floorplan.map">
<img src="http://harbor.ecn.purdue.edu/~debweb/floorplan.gif" ISMAP> </a>
</body>
</html>

Step 4: Testing the Floorplan Imagemap

To test the floorplan imagemap; I have mapped the following rooms as hotspots: 104C, 104K and The Machine Room (room 140). Try room 140. You will see that the gif is inline. Also try clicking outside the hotspots and you will see the error message.

This is the floorplan.

Additional Information:

To reference the imagemap program:

	http://<host>.ecn.purdue.edu/cgi-bin/imagemap 

Your GIF file, map file and HTML document will usually be located in your public-web directory.