Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Server-Side Imagemaps

The old-fashioned way to create an imagemap is to let the server computer where the Web page resides do all the work. Most Web authors don't bother with server-side imagemaps anymore because it's easier and just as effective to provide text links for people using older browsers. There are still an awful lot of people out there using pre-1995 Web browsers, and it isn't that difficult to make your imagemaps work for them. You can read the following explanation of what's involved and decide for yourself whether it's worth your time to provide server-side imagemaps.

When the user clicks an image that has been mapped this way, the browser program just sends the mouse's x,y coordinates to a special script on the server. Usually, this script is located in some subdirectory of cgi-bin on the server, and the HTML to implement the imagemap is just a normal anchor link.

<a href="/cgi-bin/imagemap/thisthat"><img src="thisthat.gif" ismap /></a>

Simple—but when you install a Web page including such a link, you need to tell the imagemap script which parts of the image should be associated with which link addresses. This is normally done in a map file. Each line in the map file is simply the word rect followed by an URL and two sets of x,y coordinates representing the top-left corner and the bottom-right corner of a region of the image. Some server scripts also support non-rectangular regions with the word poly and circle (or round).

The first line in a map file begins with the word default, followed by the URL that should be used if the user happens to click outside any rectangular region defined by a rect line. A map file named thisthat.map might look like the following:

default /top/this.htm
rect /top/this.htm 0,0,102,99
rect /top/that.htm 103,0,205,99

The final step in setting up a server-side imagemap is telling the imagemap script which map file to use for which image. You do this by adding a line to a system file named imagemap.conf. This file will already exist and includes entries for every imagemap defined on the server. You simply add a line with the name used in the href attribute of the <a> tag, a colon, and then the actual location and name of the associated map file. For example, the previous reference is href="/cgi-bin/imagemap/thisthat", and the preceding map file is named thisthat.map. If this map file were in a directory named /mapfiles, the line in imagemap.conf would read like this:

thisthat : /mapfiles/thisthat.map

All this isn't nearly as difficult as it may sound if you've never set up an imagemap, but it can be a hassle—especially if your pages reside on somebody else's server and you don't have the rights to modify system files such as imagemap.conf yourself. What's worse, server-side imagemaps don't work at all on Web pages located on your hard drive, a CD-ROM, or most local networks.

There are also some variations in the exact syntax for imagemap implementation; they depend on the software installed on your server. If you move your pages to a different server, the imagemaps may not work anymore. Yuck.

Fortunately, the latest versions of all the major browsers support the client-side imagemaps discussed earlier in this hour, where the association of links with specific regions in an image is handled by the browser itself instead of a server script. This means that you can include imagemaps in your HTML files without imposing an additional burden on your ISP's server, and you can be more certain that they will be processed correctly and dependably.

Share ThisShare This

Informit Network