Serving Up Image Maps
Let's talk image maps for a couple of weeks. Image maps are text files containing information that allow <img> tags to talk to <a href> tags. This enables you to break a single image into multiple regions and target several URLs as links. They're powerful navigation tools, but it's important to keep in mind that they do have a couple downsides.
For one thing, only users with graphical browsers can see image maps. In fact, users with text-only browsers won't even know you've included an image map on your page.
As Laura Lemay, author of Teach Yourself Web Publishing with HTML in a Week, eloquently put it, "The use of image maps can very effectively lock out readers with text-only browsers; have sympathy and allow them at least some method for viewing your content." It's a good idea to include some text links to help these users get around your site. Folks with slow connections will also appreciate your thoughtfulness - sometimes image maps can take a long time to load.
Server-side versus client-side
There are two types of image maps: server-side and client-side. Since most graphical browsers support server-side image maps, they've become the de facto standard on the Web. As their name implies, however, they rely on a server to interpret each click and serve up the appropriate HTML file, making them a little slower than their client-side cousins.
This week we'll cover how you can add server-side image maps to your pages.
Image map files
Each line of the NCSA image map file may contain a definition of a single polygonal-shaped region and a corresponding URL. The regions are defined by (x,y) coordinates within your image. (If you slept through algebra, "x" is the horizontal coordinate and "y" is the vertical.) A set of coordinates makes a point, and two points are required to describe a rectangle: the top left-hand corner and the bottom right-hand corner. (Keeping all your coordinates straight can get a little complicated, so I recommend using a utility like WebMap for Macs or Mapedit for Unix and Windows to help you define your polygons.)
In this diagram, the yellow rectangle is defined by the coordinates (20,20) and (70,60). If we were to link this region to a page called "yellow.html," our image map definition would look like this:
rect yellow.html 20,20 70,60
Make sure you hit return after each line, and note that in NCSA format we use spaces instead of parentheses to delineate between coordinate pairs. (We will discuss this more next week when we get to client-side image maps.)
The finished file for our image would look like this:
rect yellow.html 20,20 70,60
rect red.html 90,20 140,60
rect blue.html 20,80 70,120
rect green.html 90,80 140,120
# Feel free to use either relative
# URLs (yellow.html)
# or fully qualified URLs
# in image maps.
# You can write comments anywhere
# in your file as long as
# you begin your comment
# with a hash sign (#) and
# end each line with a newline ("Return").
Notice that we've also included a default URL: default black.html. This is optional, but strongly suggested by all standards bodies. People often use this feature to specify a URL for non-defined regions of their image map. That way users always get something when they click on the map.
Regions in other shapes
Rectangles are nice, but you can also use other shapes to define regions within your image:
rect URL x,y x,y
Defined by top left corner and bottom right corner
circle URL x,y r
Defined by center coordinate (x,y) and radius (r)
oval URL x,y x,y
Defined by tangential rectangle surrounding oval; top left corner (x,y) and bottom right corner (x,y)
poly URL x1,y1 x2,y2 ... xN,yN
Defined by contiguous line segments, conventionally in clockwise rotation
point URL x,y
A single point (x,y)
Some older servers (pre-1995) will only recognize rectangles. If you are having trouble with polygons or circles, talk with your system administrator to see if your server recognizes these shapes.
Once you've constructed this file, you should save it to your server in a location you will reference from your HTML document. Server-side image maps will only work when they are called from a Web server. That means you won't be able to view your map if the file's sitting on your desktop.
Linking to your image map from your HTML document
Now we're ready to start work on the actual HTML document. I mentioned earlier that image maps help <img> tags target multiple URLs through a single <a href> tag. Take a look at the HTML syntax for calling a server-side image map.
<a href="/cgi-bin/imagemap/my_map.map"><IMG SRC="my_image.gif" ismap width=160 height=140 border=0></A>
There are three important points here:
- <a href> points to the server-side image map file, which in turn targets multiple URLs based on region.
- The /cgi-bin/imagemap/ prefix is added to the relative path name of your image map file. (/cgi-bin/imagemap/ is a program your server uses to interpret image maps. This is fairly standard, but archaic servers may vary.)
- The ismap keyword within the <img> tag alerts your browser that the image has a corresponding map on the server. (You may still, of course, include any other image tag modifiers you wish.)
Our image (my_image.gif) has four rectangular regions and a default black region defined within an image map file. We saved this map as my_map.map and added "/cgi-bin/imagemap/" to the root path name.
Then we called it from our HTML file with
<a href="/cgi-bin/imagemap/my_map.map"><IMG SRC="my_image.gif" ismap width=160 height=140 border=0></a>
And that's it!