Electric Type


About Us



Piecing Together Server-Side Image Maps
by Patrick Corcoran 25 Sep 1996

Patrick Corcoran is director of interface and design for Activespace. In his spare time, he has been known to Hunt the Wumpus (using nothing but JavaScript).

Page 1

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.

Client-side image maps aren't as widely supported, but they're preferred by discriminating graphical surfers everywhere. They save the client's browser extra queries to the server, as well as providing the ability to trigger and coordinate JavaScript events, something we'll get to next week.

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
    default black.html
    # Feel free to use either relative
    # URLs (yellow.html)
    # or fully qualified URLs
    # (http://www.yoursite.com/yellow.html/)
    # 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:

Rectangle rect URL x,y x,y Defined by top left corner and bottom right corner
Circle circle URL x,y r Defined by center coordinate (x,y) and radius (r)
Oval oval URL x,y x,y Defined by tangential rectangle surrounding oval; top left corner (x,y) and bottom right corner (x,y)
Polygon poly URL x1,y1 x2,y2 ... xN,yN Defined by contiguous line segments, conventionally in clockwise rotation
Point 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:

  1. <a href> points to the server-side image map file, which in turn targets multiple URLs based on region.
  2. 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.)
  3. 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.)

Let's review

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!

Next week: Client-side image maps, <map> tags, and JavaScript window.status calls.

Tutorials Home  

CSS Reference  

Regular Expressions  

Image Filtering  

Adding Site Search  

Image Maps  

Browser Detection  

Fundamentals of XSSI  

FTP Tutorial  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!


© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.