Please keep
voting for us
as a Top 100
Web site!
|
|
|
Imagemapping: From Both Sides
Tucked among the HTML 3.0 extensions is one especially powerful feature: client-side imagemapping. These imagemaps function the same way their script-based counterparts do, but the map definition is described right in an HTML document (not a CGI script) and is interpreted locally by the browser, instead of by the server machine.
Already supported by several popular browsers--including Netscape Navigator 2.0, Microsoft's Internet Explorer, and Spyglass's Enhanced Mosaic 2.0--client-side imagemaps have a number of advantages for Web authors. They execute more quickly and more efficiently than maps that must first access a remote server. More important, they provide a workable solution for Web designers who don't have access to their service provider's cgi-bin directory.
Below is a brief overview of some of the practical differences between preparing a script-based imagemap and a client-side one. One downside to bear in mind before you go out and redo all your imagemaps (or add them for the first time) is that only visitors using browsers that support client-side imagemaps will be able to make use of them. If you choose to add client-side imagemaps to your site, be sure to provide an alternate means of navigation for visitors using all other browsers, from Lynx to Netscape 1.1.
Getting Started
As mentioned above, the script-based technique for implementing imagemaps requires Web designers to have access permission to their server's cgi-bin directory. You'll need to have a script for responding to imagemaps (usually distributed free with server software), and you'll need to place it in an appropriate directory (often simply called "imagemap" by many servers).
You'll also need to prepare an imagemap graphic file containing coordinates for each hotlink's boundaries. There are a number of utilities (such as WebMap on the Mac side, MapEdit for Windows, or MapMarker for Unix systems) that will allow you to identify hotlink coordinates in a graphics file, assign URLs to those regions, and save a text-based map file to be read by the imagemap's script. WebMap stores the imagemap's list of URLs in the data fork of the actual graphic file itself, letting you edit the list as necessary later. You'll also need to configure your server to find the map definitions file.
Your map's URLs should point to your imagemap script file. When a user clicks on your map, the clicked coordinates are appended to the URL. The server software will then compare those coordinates to a list of anchor points in the map definitions file, and then direct the browser to the designated Web page.
A couple of other items need to be attended to. It's a good idea to assign a default URL for any non-hotlinked parts of your imagemap. If you're lazy, you can simply reload the page on which the image appears, and fail to alert users that they need some target practice with the mouse. Writing the HTML for referencing an imagemap consists of adding an ISMAP attribute to your <IMG> tag and anchoring a link from the map graphic to the map definition file (accessed by the server's imagemap script).
Nuts and Bolts
There are two different standards for formatting a map definition file. The NCSA imagemap data file specifies the default URL, then the coordinates. The CERN imagemap data file is equally simple (it does reverse the order of the URL and coordinates, though) but is rarely used in the United States. Figure 1 shows a sample taken from my Comedy Network site.
#
# Created by WebMap 1.0.1
# Monday, September 18, 1995 at 12:28 AM
# Format: NCSA
#
default /acn/acnhome.html
poly /acn/acndymo.html 79,254 128,256 183, 277
181,290 145,305 78,304 25,270 32,259 79,254
rect /acn/acntour.html 239,0 440,20
rect /acn/acnstaff.html 239,25 441,47
rect /acn/acncomwks.html 239,51 441,73
rect /acn/acnprep.html 239,77 441,99
rect /acn/acnpaper.html 240,104 440,124
rect /acn/acnpast95.html 239,130 440,151
rect /acn/acnhelper.html 239,155 441,177
rect /acn/acnmacsw.html 240,182 441,203
rect /acn/acnwinsw.html 240,208 440,229
rect /acn/acnmall.html 240,234 440,255
rect /acn/acnfree4all.html 240,260 440,281
rect /acn/acncomments.html 240,286 439,307
rect /acn/acncright.html 205,3 236,307
The beginning of the code is a commented section, denoted by pound signs (#), that tells us what software was used to create the list. Next is the default URL, which in this case takes the reader back to the home page. The next lines describe the hot zones as defined by shapes: one poly[gon] and a dozen rect[angles]. The URLs are relative to the cgi-bin directory, and the number pairs are x,y coordinates, where 0,0 is the upper-left-hand corner of your graphic.
The imagemap definition standards let you use several shapes for designating your hot spots: circles, rectangles, polygons, and (for NCSA servers only) points. The coordinate pairs that are generated vary, based on the shape. A circle is described by its center point and any point along the circumference. An oval is described by the upper left and lower right corners of the rectangle that would perfectly contain the oval. Similarly, a rectangle is described by its upper left and lower right corners' coordinates. Polygons are described by a series of bounding coordinates, beginning and ending with the same coordinate pair. Points are described by one set of coordinates (and almost no one uses points--they're too small to click on accurately, and that's, well, pointless).
With client-side imagemapping, these coordinates are embedded within the HTML file that displays your imagemap. This leads to another bonus: Having the code within the HTML file makes debugging a lot easier than having to go to a separate application to find out why the coordinates don't match or the URL is incorrect.
The specifications for client-side imagemapping use a <MAP> tag with a NAME attribute to name the map file and an <AREA> tag with SHAPE and COORDS attributes to define each hot zone's shape and attributes. The <IMG> tag for the imagemap graphic contains a USEMAP attribute with the same value as that used for the NAME attribute in <MAP>.
As an example, Figure 2 shows the HTML code for a client-side version of the American Comedy Network imagemap.
<IMG acnmap.gif USEMAP="#acnmap">
.
.
.
<MAP NAME="acnmap">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facndymo.html&y=1999" COORDS="79,254,145,305">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facntour.html&y=1999" COORDS="239,0,440,20">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnstaff.html&y=1999" COORDS="239,25,441,47">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facncomwks.html&y=1999" COORDS="239,51,441,73">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnprep.html&y=1999" COORDS="240,104,440,124">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnpaper.html&y=1999" COORDS="240,104 440,124">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnpast95.html&y=1999" COORDS="239,130,440,151">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnhelper.html&y=1999" COORDS="239,155,441,177">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnmacsw.html&y=1999" COORDS="240,182,441,203">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnwinsw.html&y=1999" COORDS="240,208,440,229">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnmall.html&y=1999" COORDS="240,234,440,255">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facnfree4all.html&y=1999" COORDS="240,260,440,281">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facncomments.html&y=1999" COORDS="240,286,439,307">
<AREA SHAPE="rect" href="/old?u=http%3A%2F%2Fwebdeveloper.com%2Fhtml%2Facncright.html&y=1999" COORDS="205,3,236,307">
</MAP>
Note that the map doesn't have to be contained on the same HTML page as the calling <IMG> tag. If you have a number of imagemaps used in your site, and you want to avoid including the map coordinates in so many documents, it might make sense to create one page of maps and link to this separate document as necessary from other pages. In this case, the USEMAP attribute would be expanded to read "maps.html#nameofmap."
When you access a client-side imagemap with an enabled browser, you'll notice two differences right away: The URLs for the hot spots are revealed as the cursor passes over each individual region, as opposed to just seeing the Cartesian coordinates (as is the case with imagemaps that call gateway scripts). This may be a good thing or a bad thing, depending on the content of the page; you may not want the eventual destination to be known to the user if you're trying to surprise them. And on the plus side, the difference in speed will be quite evident.
All told, support for client-side imagemapping is one of the brighter moves that browser companies can make. As time goes by, script-based imagemaps should become increasingly a thing of the past.
David Lawrence produces online areas for America Online and develops Web sites for fun and profit. His book, Learn HTML on the Macintosh, is published by Addison-Wesley. He can also be reached at LearnHTML@aol.com.
Reprinted from Web Developer® magazine, Vol. 2 No.1 Spring 1996 (c) 1996 internet.com Corporation. All rights reserved.
Copyright © 1999
internet.com CorporationAll Rights Reserved. Legal Notices.
Contact the WebDeveloper.com staff
Last modified: Fri Sep 24 17:57:33 EDT 1999
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
