The ECN No Name Newsletter is no longer being published. This is an archived issue.
[previous article] [next article]Cathy Curry
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.
The steps you need to take when creating a clickable image map in ECN are:
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.
Rough out mentally where you will place the hotspots. Arbitrary rectangles, polygons and circles can be used to identify the hotspots. Remember these hotspots can go to another URL outside of your network.
The shapes used depend on what your graphic represents. The shapes to choose from are circle, polygon and rectangle.
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:
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. You can use ImageMagick to view the image and its x,y coordinates to use for mapping the image's hotspots.
Locating X,Y Coordinates
To find the x,y coordinates of your image:
If you did not edit your environment to keep ImageMagick permanently in your path, then type: /usr/local/bin/magick/display file.gif
The x,y coordinates can be viewed by positioning the pointer anywhere within the image. The coordinates appear in a box in the upper left corner of the window. These coordinates will change as you scroll around the image.
For example, to determine the coordinates of a rectangle, you need two coordinates pairs; upper-left and lower-right. So move the pointer to the upper left corner of the shape and write down the two numbers you see in the upper left corner box. The numbers in the box will look something like this: +119+158
The x,y coordinates are 119,158. Then go to the lower right corner of the shape and write down the numbers you see in the upper left corner box. Now you have your two pairs of x,y coordinates to map your image.
You follow the same procedure to determine x,y coordinates for a circle and polygon, remembering the circle needs two coordinate pairs (center and edgepoint) and a polygon needs coordinate pairs for each vertex.
The URL can be either a URL or HTML document which has a GIF inserted. Note: It is best to insert your GIF file into an HTML document to be viewed since you do not know if the person viewing this has an external viewer to handle the GIF.
Example of ~/public-web/floorplan.map
default http://www.ecn.purdue.edu \
/~cathyc/error.message.html
rect http://wwww.ecn.purdue.edu/~marian/ \
4,336 28,374
rect http://www.ecn.purdue.edu/~ghg/ \
169,403, 195,403 195,432 169,432
poly http://www.ecn.purdue.edu/ECN/FAQ \
/mosaic/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 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 the image is the link trigger and the URL invokes the imagemap script and passes it to the map name.
~/public-web/floorplan.html
<html> <head> <title>MSEE Floorplan--Main Floor-South</title> <head> <body> <a href="http://www.ecn.purdue.edu/cgi-bin \ /imagemap/~cathyc/floorplan.map"> <img src="http://www.ecn.purdue.edu/~cathyc \ /floorplan.gif" ISMAP></a> </body> </html>
Step 4: Testing The Floorplan Imagemap
Using your web browser, test the floorplan imagemap http://www.ecn.purdue.edu/~cathyc/floorplan.html
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.
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.
HTML