This chapter is from the book

This chapter is from the book

16.8 Server-Side Image Maps

In HTML, an element called MAP lets you associate URLs with various regions
of an image; then, when the image is clicked in one of the designated regions,
the browser loads the appropriate URL. This form of mapping is known as a
client-side image map, since the determination of which URL to contact is
made on the client and no server-side program is involved. HTML also supports
server-side image maps that can be used within HTML forms. With such
maps, an image is drawn, and when the user clicks on it, the coordinates of the
click are sent to a server-side program.

Client-side image maps are simpler and more efficient than server-side ones
and should be used when all you want to do is associate a fixed set of URLs with
some predefined image regions. However, server-side image maps are appropriate
if the URL needs to be computed (e.g,. for weather maps), the regions change
frequently, or other form data needs to be included with the request. This
section discusses two approaches to server-side image maps.

IMAGEStandard Server-Side Image Maps

The usual way to create server-side image maps is by means of an <INPUT
TYPE="IMAGE" ...> element inside a form.

HTML Element:

<INPUT TYPE="IMAGE" ...> (No End Tag)

Attributes:

NAME (required), SRC, ALIGN

This element displays an image that, when clicked, sends the
form to the servlet or other server-side program specified by the enclosing
form's ACTION. The name itself is not sent; instead,
name.x=xpos and name.y=ypos are
transmitted, where xpos and ypos are the
coordinates of the mouse click relative to the upper-left corner of the image.

NAME

The NAME attribute identifies the textfield when the form is submitted.

SRC

SRC designates the URL of the associated image.

ALIGN

The ALIGN attribute has the same options (TOP, MIDDLE, BOTTOM, LEFT, RIGHT)
and default (BOTTOM) as the ALIGN attribute of the IMG element and is used in
the same way.

Listing 16.5 shows a simple example, where the form's ACTION specifies
the EchoServer developed in Section 16.12. Figure 1621 and 1622
show the results before and after the image is clicked.

Figure 1622 Clicking on the image at (305, 280) submits the form
and adds map.x=305&map.y=280 to the form data.

ISMAPAlternative Server-Side Image Maps

ISMAP is an optional attribute of the IMG element and can be used in a
similar manner to the <INPUT TYPE="IMAGE" ...> FORM entry. ISMAP
is not actually a FORM element at all, but can still be used for simple
connections to servlets or CGI programs. If an image with ISMAP is inside a
hypertext link, then clicking on the image results in the coordinates of the
click being sent to the specified URL. Coordinates are separated by commas and
are specified in pixels relative to the top-left corner of the image.

For instance, Listing 16.6 embeds an image that uses the ISMAP attribute
inside a hypertext link to http://localhost:8088/ChipTester, which is
answered by the mini HTTP server developed in Section 16.12. Figure 1623
shows the initial result, which is identical to what would have been shown had
the ISMAP attribute been omitted. However, when the mouse button is pressed 271
pixels to the right and 184 pixels below the top-left corner of the image, the
browser requests the URL http://localhost:8088/ChipTester?271,184 (as
is shown in Figure 1624).

If a server-side image map is used simply to select among a static set of
destination URLs, then a client-side MAP element is a much better option because
the server doesn't have to be contacted just to decide which URL applies.
If the image map is intended to be mixed with other input elements, then the
IMAGE input type is preferred instead. However, for a stand-alone image map
where the URL associated with a region changes frequently or requires
calculation, an image with ISMAP is a reasonable choice.