How to do Imagemaps

Imagemaps

Three files are needed

the image, either in GIF or JPG format
the map file that contains the coordinates and URLs for selection
the HTML file that connects the two

For example, the map file for the GIF image of the US is named conus1.map. The format is

   area   URL   coordinates

where area is one of the geometric objects recognized, eg

point - rarely used
rect
circle
poly - set of closed points
default - for anything else not explicitly defined on the map

The map file for this image includes the lines

default   /~blanche/TEK/null.html
rect      /~blanche/TEK/florida.html 450,304 572,373
poly      /~blanche/TEK/colorado.html 175,153 169,212 253,215 256,156

The default line means everything NOT defined somewhere else will use the file null.html. The rectangle described by the two points (450,304) and (572,373) uses file florida.html. That means anytime the cursor (mouse or otherwise) goes inside that rectangle, and is selected, that URL will be invoked.

The poly or polygon described for colorado.html is free-format. Looks like a rectangle, but it's not.

It's very difficult to create map files without software support, such as Adobe's PageMill for the Mac, or MapEdit or similar tools for Windows or XWindows.

Once the map file is created, the only thing left is to make the three files talk to each other. In the HTML file that will contain the image, a line similar to:

<A HREF="http://www.csd.net/cgi-bin/imagemap/~blanche/TEK/conus1.map">
   <IMG SRC="conus1.gif" WIDTH="640" HEIGHT="390" NATURALSIZEFLAG="3"
    ALIGN=bottom ISMAP>

is needed. The first part, the <A HREF...> invokes the RMII Imagemap routine using the map file named conus1.map in my directory.

The next part, <IMG SRC="conus1.gif", identifies the name of the image that will be displayed. In this statement is the work ISMAP which is a required option for the HTML. And that's all there is to it!

Oh .. of course you need URLs (either other HTML files or CGI) that are invoked when the appropriate area on the image is selected.

Return to Teknikos home page