Ordinarily, placing an image within anchor tags makes the entire image a link to a single document when the user clicks anywhere on the image. As an alternative, you can create multiple links, or "hot spots," within a single graphic. These graphics are called imagemaps. The effect is created with HTML tags and/or text files and scripts on the server; the image itself is an ordinary graphic file that just serves as a backdrop for the pixel coordinates.
There are two types of imagemaps: client-side and server-side. For client-side imagemaps, the coordinate and URL information necessary to create each link is contained right in the HTML document. The process of putting the pieces together happens in the browser on the user's machine (thus, client-side). For server-side imagemaps, as the name suggests, the map information resides on the server and is processed by the server or a separate CGI script.
Client-side imagemaps are a slightly newer technology and are not supported by first-version browsers (although nearly all current browsers know what to do). For this reason, some web developers create redundant imagemaps (both client- and server-side) so that if the browser doesn't recognize the client-side map, the server's imagemap processor can take over.
11.6.1. Creating Imagemaps
The key to making imagemaps work is a map, based on the image, that associates pixel coordinates with URLs. This map is handled differently for client-side and server-side (as outlined in the following sections), but the outcome is the same. When the user clicks somewhere within the image, the browser passes the coordinates of the mouse pointer to the map, which, in turn, generates the appropriate link.
184.108.40.206. Available tools
Although it is possible to put together imagemap information manually, it is much easier to use a tool to do it. There are many imagemap creation tools available as shareware for both Windows and the Mac. Be sure to look for one that is capable of outputting both client- and server-side map information, such as the following:
The full-featured WYSIWYG web authoring tools (such as Macromedia Dreamweaver and Adobe GoLive) have imagemap creation tools built in. This is particularly handy for creating client-side imagemaps right in the current document.
220.127.116.11. Creating the map
Regardless of the tool you're using, and regardless of the type of imagemap you're creating, the process for creating the map information is basically the same. Read the documentation for your imagemap tool to learn about features not listed here.
Figure 11-1. Creating map information (shown in MapMaker 1.1.2)
If you do not have an imagemap tool, it is possible to write out the map information by hand following the examples in this chapter. Simply note the pixel coordinates of the shapes as indicated in an image editing program (in Photoshop, they are provided in the Info palette) and type them into the appropriate place in the map file.
11.6.2. Client-Side Imagemaps
There are many advantages to using client-side imagemaps. They are self-contained within the HTML document and do not rely on a server to function. This means you can test the imagemap on your local machine or make working site demos for distribution on disk. It also cuts down on the load on your server and improves response times. In addition, complete URL information displays in the status bar when the user mouses over the hot spot (server-side imagemaps display only coordinates).
The only disadvantage to client-side imagemaps is that because it is slightly newer technology, they are not universally supported. Netscape Navigator 1.0 and Internet Explorer 2.0 do not support client-side imagemaps. Experimental or obscure browser programs may not either. Fortunately, these browsers make up a miniscule portion of the current browser population.
18.104.22.168. Sample client-side imagemap
Figure 11-2. Imagemapped graphic
Example 11-1. HTML for client-side imagemap
<HTML> <HEAD><TITLE>Client-side Imagemap Sample</TITLE></HEAD> <BODY> <MAP NAME="spacey"> (A) <AREA SHAPE="RECT" COORDS="203,23,285,106" (B) HREF="http://www.lunch.com/orbit/"> <AREA SHAPE="CIRCLE" COORDS="372,64,40" HREF="mypage.html"> (C) <AREA SHAPE="POLY" (D) COORDS="99,47,105,41,94,39,98,34,110,35,115,28,120,35,133,38,133, 42,124,42,134,58,146,56,157,58,162,63,158,67,141,68,145,72,155, 73,158,75,159,80,148,83,141,83,113,103,87,83,72,83,64,80,64,76, 68,73,77,72,79,63,70,59,67,53,68,47,78,45,89,45,99,47" HREF="yourpage.html"> </MAP> <IMG SRC="orbit.gif" WIDTH=500 HEIGHT=125 BORDER=0 USEMAP="#spacey"> (E) </BODY> </HTML>
11.6.3. Server-Side Imagemaps
Server-side imagemaps work with all browsers, but they are a bit more involved to create. In addition, they rely on the server, which makes them less portable than their client-side counterparts and increases the load on the server. For a number of reasons, server-side imagemaps are going out of style and aren't used nearly as often as their client-side counterparts.
Server-side imagemaps have four elements:
Because server-side imagemaps are so dependent on the configuration of the server, you need to coordinate with your server administrator if you plan to use them. You'll need to find out what type of .map file to create ("NCSA" and "CERN" are two possibilities, based on the type of server) as well as the pathname to which the imagemapped graphic should be linked (this usually includes a cgi-bin directory).
22.214.171.124. Sample map definition file (.map) file
Example 11-2. Server-side imagemap
default index.html (A) rect http://www.lunch.com/orbit/ 203,23 285,106 (B) circle mypage.html 372,64 412,104 poly yourpage.html 99,47 105,41 94,39 98,34 110,35 115,28 120,35 133,38 133,42 124,42 134,58 146,56 157,58 162,63 158,67 141,68 145,72 155,73 158,75 159,80 148,83 141,83 113,103 87,83 72,83 64,80 64,76 68,73 77,72 79,63 70,59 67,53 68,47 78,45 89,45 99,47
126.96.36.199. The HTML document
Within the HTML file, the image is treated as shown here:
<HTML> <HEAD><TITLE>Server-side Sample</TITLE></HEAD> <BODY> <A HREF="/cgi-bin/imagemap/spacey.map"> <IMG SRC="orbit.gif" BORDER=0 ISMAP></A> </BODY> </HTML>
The anchor tag links the whole graphic to the map definition file (spacey.map), which is located within the cgi-bin directory on the server. This is a typical configuration; however, you should follow your server administrator's instructions.
The ismap attribute within the image tag tells the browser that the graphic is an imagemap.
11.6.4. When Not to Use Imagemaps
Imagemaps are not always the best solution and are actually waning somewhat in popularity as web design evolves. Slicing up a large image, each slice of which can be linked to a different document, and holding the pieces together with a table often offers functionality that an imagemap can't match. This technique is so popular that it is built into web graphics tools such as Macromedia Fireworks and Adobe Photoshop 6 and ImageReady. There is also a demonstration in Chapter 13, "Tables".
188.8.131.52. Providing complete alternative text
When a user cannot view images (or has chosen to turn them off), the browser displays the text specified by the alt attribute within the <img> tag. Unfortunately, for each imagemap graphic you get only one alternative text message, which may not be useful for users with non-graphical browsers (although Lynx can construct a list of links based on the href values from each area).
One common solution to this problem is to provide a redundant set of links in HTML text somewhere else on the page so that users who cannot view graphics can still navigate the site.
If the image is divided into pieces rather than using an imagemap, you can provide alternative text for each linked piece, which alleviates the need to add the extra line of linked text to your HTML page.
184.108.40.206. Rollover buttons
Copyright © 2002 O'Reilly & Associates. All rights reserved.