Image maps

There is a specification in html that lets you as the web designer create a "map" of your images, to which you can attach links and such. There are two ways to do it. One way is called server side image maps, and the other is called client side. For the server side maps to work, you need to have the page up on a server which has a special program on it to process commands about maps. This involves possibly programming the server, which we are not going to cover here. Additionally, one needs access to the /cgi-bin/ directory, which may not be possible. There are many available references for those interested, however.

So we will just discuss client side image maps here. What is useful about turning an image into a map? One can, most simply, use an image to specify a bunch of links which can be used as a navigation bar, main page image, design schematic with sensitive regions, etc. At a more in depth level, one can attach javascript actions that do all sorts of things. The interested reader should pursue a good reference on Javascript. Try Javascript for the World Wide Web, available at most bookstores for a quick start on javascript. They have a great webpage with all the code from the book, which you can download for free! web page is http://peachpit.com.

The way that client side maps work is that you need to define an image as a map, then define what the different sections are that have specific links or javascript attached. These regions can be rectangles, circles, or polygons. The format for an image map is as follows:

You can use a jpeg or gif as a source for the image, as usual for html. In the declaration for the image tag, you specify that it is a map...

Then you need to define the map to which that name points...

<area shape=rectangle coords="x1,y1,x2,y2 " href="firstlink.html" onMouseOver="self.status='This is a cool message.' ; return true>

</map>

Above you can see the basic format is that you enclose the map in the <map></map> tag, and define an area to be clickable with the <area> tag. That is what contains the size of the area map in coordinates (the x1,y1,x2,y2 are actually written as integers, by the way, not variables...this was just done this way for the example!), the link, and anything else you want to happen as actions. You may want to have a quick message that appears at the bottom of the browser window when the mouse goes over a section of the image to give more information. That is done with the onMouseOver attribute, with the message in SINGLE quotes. Don't forget for the onMouseOver attribute to close it with the return true statement. Additionally, you can define multiple areas, and the shapes you can do are:

rectangle (define coordinates with x1,y1,x2,y2 where the first pair is one corner of the rectangle, and the other is the diagonal opposite)

circle (define coordinates with x,y,r where x and y are the center point and r is the radius- NOTE that 0,0 is the upper left of the image, and increasing y moves you DOWN on the screen space)

polygon (define coordinates with x1,y1,x2,y2,x3,y3... as many sides as you want- note that the polygon is automatically closed so you don't need to go the first coordinate to close the region)

The other thing you should know is that you can specify a target, like for creating frames, that will display the link in that target, specify this in the area tag.

And finally, you can specify a title in the area tag that flashes the title when the user moves the mouse over the image map area.