HTML The Definitive Guide (75 page)

When the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the tag to the document server. The server uses the mouse pointer coordinates to determine which document to deliver back to the browser.

When ismap is used, the href attribute of the containing tag must contain the URL of a server application or, for some HTTP servers, a related map file that contains the coordinate and linking information. If the URL is simply that of a conventional document, errors may result and the desired document will most likely not be retrieved.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image beginning with (0,0). The coordinates are added to the end of the URL, preceded by a question mark.

For example, if a user clicks 43 pixels over and 15 pixels down from the upper-left corner of the image displayed from the following link:

the browser sends the following search parameters to the HTTP server:
cgi-bin
imagemap/toolbar.map?43,15

In the example,
toolbar.map
is a special image map file inside the
cgi-bin/imagemap
directory and containing coordinates and links. A special image map process uses that file to match the passed coordinates (43,15 in the example) and return with the selected hyperlink document.

7.5.1.1 Server-side considerations

With mouse-sensitive ismap-enabled image maps, the browser is required to pass along only the URL and mouse coordinates to the server. Converting these coordinates into a specific document is handled by the document server. The conversion process differs between servers and is not defined by the HTML standard.

You need to consult with your web server administrators and perhaps even read your server's documentation to determine how to create and program an image map. Most servers come with some software utility, typically located in a
cgi-bin/imagemap
directory, to handle image maps. And most of these use a text file containing the image map regions and related hyperlinks that is referenced by your image map URL to process the image map query.

Here's an example image map file that describes the sensitive regions in our example image: # Imagemap file=toolbar.map

default dflt.html

circ 100,30,50 link1.html

rect 180,120,290,500 link2.html

poly 80,80,90,72,160,90 link3.html

Each sensitive region of the image map is described by a geometric shape and defining coordinates in pixels, such as the circle with its center point and radius, the rectangle's upper-left and lower-right edge coordinates, and the loci of a polygon. All coordinates are relative to the upper-left corner of the image (0,0). Each shape has a related URL.

An image map processing application typically tests each shape in the order it appears in the image file and returns the document specified by the corresponding URL to the browser if the user's mouse x,y coordinates fall within the boundaries of that shape. That means it's okay to overlap shapes; just be aware which takes precedence. Also, the entire image need not be covered with sensitive regions: if the passed coordinates don't fall within a specified shape, the default document gets sent back to the browser.

This is just one example for how an image map may be processed and the accessory files required for that process. Please huddle with your webmaster and server manuals to discover how to implement a server-side image map for your HTML documents and system.

7.5.2 Client-side Image Maps

The obvious downside to server-side image maps is that they require a server. That means you need access to the required HTTP server or its
cgi-bin
directory, which isn't always available. And server-side image maps limit portability, since not all image map processing applications are the same.

Server-side image maps also mean delays for the user while browsing, since the browser must get the server's attention to process the image coordinates. That's even if there's no action to take, such as a section of the image that isn't hyperlinked and doesn't lead anywhere.

Client-side image maps suffer from none of these difficulties. Enabled by the usemap attribute for the tag, and defined by special

To create a client-side image map, include the usemap attribute as part of the tag.[
7
] Its value is the URL of a

identifies the map to be used. Most often, the map is in the same document as the image itself, and the URL can be reduced to the fragment identifier: a pound sign (#) followed by the map name.

[7] Alternatively, according to the HTML 4.0 standard but not yet implemented by any browser, you may reference a client-side image map by including the usemap attribute with the