First, create the image you want to turn into a map and save it as either a GIF or JPEG image. We'll use the internet.com toolbar as an example.
Fig. 1: The internet.com Toolbar
Next, you'll need a program in which you can assign "hot areas" to your
image. Since I develop on a Mac, I use WebMap. I'm sure there are equivalent programs for
PC and Unix platforms, but I don't know what they are offhand. Whatever
program you use, you should be able to draw polygons around the areas you
want to make clickable, assign URLs to those areas, and export the
resulting list of coordinates and URLs to a text (.map) file.
Fig. 2: Selecting a rectangular area and assigning a URL in WebMap.
If I assign URLs to each of the rectangular areas suggested by the words
(as in Fig. 2) and export my coordinates and URLs as text, here's what the
resulting 0824-toolbar.map file looks like:
# Created by WebMap 2.0b9 # Friday, August 23, 1996 at 3:57 PM # Format: NCSA # rect http://www.internet.com/ 399,0 449,31 rect http://search.internet.com/ 341,0 397,32 rect http://www.internet.com/corporate/ 276,0 339,32 rect http://pubs.internet.com/ 209,0 273,32 rect http://www.internet.com/resources/ 80,0 147,31 rect http://netday.internet.com/ 6,0 77,31 rect http://events.internet.com/ 149,0 205,32 default http://www.internet.com/
With a .map file, you have all you need to make a server-side
imagemap--that is, if your server software supports cgi-less imagemaps, as
the latest and most ubiquitous software does. On internet.com we put all our
.map files in the imaps directory (as most of our
images go in the images directory), but you don't have to put
them there. Here's the syntax for your server-side imagemap (don't forget
the ISMAP as that's the key to the whole thing):
<a href="../0824-toolbar.map" target="_top"> <img src="0824-toobar.gif" ISMAP alt="Click here to go Home" border=0> </a>
You'll notice that I put "Click here to go Home" in the ALT area. This is because the "default" URL will kick in if the image doesn't load, and I've specified the main internet.com page as the default URL.
Next we'll make a client-side map for our toolbar, using the coordinates
from the .map file. Pay close attention to the syntax of the
tags, as the order of the fields is important.
<map name="toolbar"> <area shape="rect" alt="Netday News" coords="6,0 77,31" href="http://netday.internet.com"> <area shape="rect" alt="Resources" coords="80,0 147,31" href="http://www.internet.com/resources/"> <area shape="rect" alt="Events" coords="149,0 205,32" href="http://events.internet.com/"> <area shape="rect" alt="Newsstand" coords="209,0 273,32" href="http://pubs.internet.com/"> <area shape="rect" alt="Corporate" coords="276,0 339,32" href="http://www.internet.com/corporate/"> <area shape="rect" alt="Search" coords="341,0 397,32" href="http://search.internet.com/"> <area shape="rect" alt="Home" coords="399,0 449,31" href="http://www.internet.com/"> <area shape="default" href="http://www.internet.com/"> </map>
Now, to make our toolbar primarily a client-side imagemap for browsers that
can handle them, and a server-side imagemap for those that can't, we just
need to add one more part to the server-side only link:
USEMAP="#toolbar".
<a href="../0824-toolbar.map" target="_top"> <img src="/devforum/design/96/0824-toobar.gif" USEMAP="#toolbar" ISMAP alt="Click here to go Home" border=0> </a>
That's all there is to it!
