Image Maps
Image maps, once learned, can be very simple. But for the beginner, they can be infuriating. It took me 3 days to get my first image map to work. Now it takes about 2 minutes. Anyway, first you must decide whether you want client-side or server-side image maps. What's the difference?

Client-Side maps work on the browsers end. This works great, but if the browser can't handle them (like Netscape 1.0) than people can't use them. But, in my opinion, they're better. You don't have to worry about having cgi-bin access to control it.

Server-Side works like the client-side map, but is actually a program. When the map is clicked on, the program on the servers end runs and brings up the appropriate URL for the browser to load. It works on almost every browser that I know of. But if you do not have access to the cgi-bin directory, it can be a pain.

Client-Side Image Maps
An example of a client-side map would be the map on the main page of this site. The code for the map looks like this:

&ltmap name="MainMap"> &ltarea shape=rect coords="0,0,187,30" href="tags/">
&ltarea shape=rect coords="1,31,187,56" href="forms/">
&ltarea shape=rect coords="1,56,187,77" href="tables/">
&ltarea shape=rect coords="1,77,187,100" href="frames/">
&ltarea shape=rect coords="1,100,187,124" href="cgi/">
&ltarea shape=rect coords="1,124,187,148" href="javascript">
&ltarea shape=rect coords="1,148,187,170" href="java/">
&ltarea shape=rect coords="1,170,187,197" href="editors.html">
&ltarea shape=rect coords="1,198,187,239" href="links.html">
&ltimg src="picts/mainmap.gif" width=187 height=239 border=0 alt=The HTML Tutor main map - for HTML buffs everywhere" usemap="#MainMap">

The &ltmap></map> defines that this is indeed a map, and namenames the map for use in the browser. It's referenced in the &ltimg src>. This defines that the map exists. Now for the tags within the map.
area shape=rect - defines the shape of the area that will be the link. This can br rect (rectangle), circle and poly (polygon).
coords="1,2,3,4" - these define the coordinates of the circle, polygon or rectangle.
href="file.html" - this is a hypertext link that this area of the map will refer to. This can also be an image, or even a mailto: tag. That's up to you.

Now, we end it all up with the &ltimg> tag. You;ll notice it's the same as all other tags, but it has usemap="#MainMap". Without this, the map will not work. This is what tells the browser that the picture being loaded should be associated with the map and used accordingly.

Well, that's great... but how do we figure out the coordinates? Well, there are two ways. The easy way is to download Map This!, an excellent image map editor for Windows 95. This is an easy way to make them. If you can't use that, than try getting Paint Shop Pro. This program allows you to see the coordinates of the picture. It's also a pretty darn good graphics program. Just use the eyedropper to define the coordinates.

Server-Side Image Maps
Server-side image maps have the same basic layout of client-side image maps, but they are in a little different order. We'll use the coordinates from the map above. But here's how they would appear in a server-side map:

rect	0,0	187,30
rect	1,31	187,56
rect	1,56	187,77
rect	1,77	187,100
rect	1,100	187,124
rect	1,124	187,148
rect	1,148	187,170
rect	1,170	187,197
rect	1,198	187,239

This tells the server that the selection will be a rectangle, it should like to with the following coordinates. The default defines what the picture should link to if an area is clicked that is not defined by the coordinates. To activate it on most systems, you would use &lta href="/cgi-bin/imagemap/cgi-bin/maps/">&ltimg src="picts/map.gif" ISMAP></a>. The ISMAP tells the server that this picture is an image map, and the defines it's coordinates. The /cgi-bin/imagemap is the cgi script on the server that will be used, and the /cgi-bin/maps/ tells the imagemap script where the file is that defines the coordinates.

I know this may sound a little confusing. So if you want to have server-side image maps, contact your local webmaster and ask him to help you. And if all else fails, ask me.

For a more detailed description of both styles of maps, please feel free to visit some of these excellent sites for tutorials:

Return Home

All Artwork & Design 1997-1999 Krit Spooker