19.8 Server-Side Image Maps
| In standard 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; when the user clicks on the image, 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. IMAGEStandard Server-Side Image MapsThe 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.
Listing 19.12 shows a simple example in which the form's ACTION specifies the EchoServer developed in Section 19.12. Figures 19-22 and 19-23 show the results before and after the image is clicked. Listing 19.12 ImageMap.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>The IMAGE Input Control</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">The IMAGE Input Control</H1> Which island is Java? Click and see if you are correct. <FORM ACTION="http://localhost:8088/GeographyTester"> <INPUT TYPE="IMAGE" NAME="map" SRC="images/indonesia.gif"> </FORM> Of course, image maps can be implemented <B>in</B> Java as well. :-) </BODY></HTML> Figure 19-22. An IMAGE input control with NAME="map" . Figure 19-23. Clicking on the image at (447, 272) submits the form and adds map.x=447&map.y=272 to the form data. ISMAPAlternative Server-Side Image MapsISMAP is an optional attribute of the IMG element and can be used in a manner similar to the <INPUT TYPE="IMAGE" ...> FORM entry. ISMAP is not actually a FORM element at all, but it can still be used for simple connections to servlets or other server-side 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 19.13 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 19.12. Figure 19-24 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 270 pixels to the right and 189 pixels below the top-left corner of the image, the browser requests the URL http://localhost:8088/ChipTester?270,189 (as is shown in Figure 19-25). Figure 19-24. Setting the ISMAP attribute of an IMG element inside a hypertext link changes what happens when the image is selected. Figure 19-25. When an ISMAP image is selected, the coordinates of the selection are transmitted with the URL. 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 in which the URL associated with a region changes frequently or requires calculation, an image with ISMAP is a reasonable choice. Listing 19.13 IsMap.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>The ISMAP Attribute</TITLE> </HEAD> <BODY> <H1 ALIGN="CENTER">The ISMAP Attribute</H1> <H2>Select a pin:</H2> <A HREF="http://localhost:8088/ChipTester"> <IMG SRC="images/chip.gif" WIDTH=495 HEIGHT=200 ALT="Chip" BORDER=0 ISMAP></A> </BODY></HTML>  |
EAN: 2147483647
Pages: 194