Chapter 16 -- Imagemaps Chapter 16 Imagemaps CONTENTS An Overview of Imagemaps Server-Side Imagemaps Client-Side Imagemaps Imagemap Check Just as HTML forms are a way to elicit a more interactive level of input from the user, so too are imagemaps. Whereas forms provide a template for information that the user fills in, the imagemap (also called a graphical information map) is a way for users to respond through graphics. Essentially, an imagemap provides a way for any part of an image to be linked to a particular URL. Every single pixel of a graphical image can be linked to a separate URL (if desired), so that an image can serve as a fairly elaborate "switching station" for users to access information. A common application is a point-and-click map that enables the user to find out information about a particular area or building. Kevin Hughes originated the use of imagemaps for this purpose in his work for Honolulu Community College (see Fig. 16.1, http://www.hcc.hawaii.edu/hccinfo/hccmap/hccmap2.html). Figure 16.1 : A sample imagemap used for a college campus (courtesy of the Honolulu Community College). The benefit of an imagemap is that it gives the user a more expressive way to view resources for "the next click." Instead of requiring a list of words, imagemaps can concentrate a great deal of information in a small space-a perfect capability for geographic information. The Virtual Tourist (http://www.vtourist.com/), for example, uses imagemaps in its interface to a directory of all the WWW servers in the world. This chapter gives you an overview of imagemaps. Part V, "Case Studies," contains more advanced examples. In particular, Carlos A. Pero's Chapter 31, "A Web Coloring Book," describes a good example combining imagemaps and CGI programs. An Overview of Imagemaps The general idea of an imagemap is that users can click on an image and, in response, view the resource or download the content associated with the pixel on the image where they clicked. To implement this, you'd have to create an image, prepare a list of the correspondence of the pixels on the images to resources, and then make these two pieces "active" on the web page. You enable the connection between the image and the list of corresponding resources through the server or through the user's client. In server-side imagemaps, users click on the image that will be compared to a file, referenced in the IMG element containing the image that resides on the server. The server compares the coordinates of the user's click on the imagemap with the list of resources and sends the corresponding resource to the user's browser (see Fig. 16.2). Figure 16.2 : Server-side imagemap processing. The benefit of server-side imagemaps is that you don't have to worry about what client (Web browser) the user has. The drawback of server-side imagemaps is that they require the server to process all requests. If many users are clicking on many imagemaps, the processing load on the server (as well as the network traffic) is higher. In contrast, a client-side imagemap doesn't require the server to make the connection between the user's click on the image and the retrieval of the resource. In a client-side imagemap, you include the information about which area of the image corresponds to what resource right in the HTML file. You use extensions to the HTML element IMG to identify the list of corresponding areas and resources. You use the new element MAP (recognized by many browsers, including Netscape 2.0, SpyGlass Mosaic 2.0, and Microsoft Internet Explorer) to define the correspondences between the areas and the resources (see Fig. 16.3). Figure 16.3 : Client-side imagemaps. The benefit of the client-side imagemap is that the server doesn't have to process the click of the user; the browser is given all it needs to know to process requests right in the HTML file. Another benefit is that the user can place the cursor over a hotspot in a document and see the URL associated with that hotspot; this is not possible with a server-side imagemap. To date, only some browser brands support the client-side processing of imagemaps, so you'll have to consider carefully whether your audience can or will use them. But because of their efficiency, expect to see just about all browsers support client-side imagemaps. Check with the documentation of the browsers that your audience uses. If you have the resources, you might want to implement both kinds of imagemaps, giving users with capable browsers the advantage of the client-side imagemaps while providing functionality for those who can use only the server-side imagemaps. There's still another way to do imagemaps: Java. If your users' browsers are Java-enabled, you can use the Java programming language to create similar behavior in an image. In fact, the behavior of the images in Java can be even more appealing-allowing the image to change appearance based on the user's mouse position (see Fig. 16.4). Figure 16.4 : A Java imagemap. The Java imagemap technique requires you to be able to program in Java, and it requires that your users have Java-enabled browsers. The benefit of a Java imagemap is that it also is a client-side technique. Instead of requiring that the server process all the click requests on all the images, the users' clients can process them. A Java imagemap is a bit more complicated to set up, but it gives you more capabilities than the HTML client-side imagemap solution. For an example, see http://java.sun.com/applets/applets/ImageMap/example1.html. You'll be able to download the Java code at that site and experiment with it to see how you can use the classes in your own Java-based imagemaps. The specification for imagemaps in HTML may change again in the definition of future versions of HTML. Server-Side Imagemaps The administrative requirements for server-side imagemaps follow: You need to have an HTTP server that supports server-side imagemaps installed and operating. Servers that support imagemaps include the following: Netscape Server http://www.netcape.com/ NCSA's HTTPD for UNIX http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html W3C's HTTPD for UNIX http://www.w3.org/pub/WWW/Daemon/User/CGI/HTImageDoc.html MacHTTP for Macintosh http://weyl.zib-berlin.de/imagemap/Mac-ImageMap.html HTTPS for Windows NT http://emwac.ed.ac.uk/html/internet_toolchest/https/imgmap.htm You need an imagemap program compiled in the cgi-bin directory of the server. (See http://hoohoo.ncsa.uiuc.edu/docs/Overview.html for the NCSA server.) For other servers, the imagemap program is built into the server. Usually, the Web administrator already will have these in place. The information developer's steps follow: Create an image. Many drawing and painting tools are available. A typical file ending for the image files is the Graphical Interchange Format (GIF), as described in the preceding chapter. Create a mapfile. This file specifies what URL will be accessed as a result of a user clicking on a region of the image. The general format of this mapfile follows: default default-URL rect URL UL-corner LR-corner poly URL POINT1 POINT2 POINT3 .... POINTN circle URL CENTER EDGE-POINT . . . . . . The default-URL is the resource that is opened if the user clicks on any region not designated in one of the other lines of the file. The keyword rect identifies each line as a rectangle. The URL after rect is the resource that is opened if the user clicks on the image in the rectangle bounded by the upper left corner (UL-corner) coordinates (given in x,y pairs in pixels) and the lower right (LR-corner) coordinates. The keyword poly identifies a polygon. Using this keyword, a "trace around" can be made for areas on the image to associate with a particular URL. The keyword circle identifies a circle with the coordinates given for its center and a point on its circumference. If the user creates definitions of shapes on the image that overlap, the first entry in the mapfile takes precedence. The preceding shapes are most common for most server implementations of imagemaps. Some servers support other shapes. Win httpd supports ellipse, for example. Note that the servicing of map requests can vary by platform without incompatibility problems. The user interface works for any graphical browser; the back end processing of the imagemap requests are done by the server, so customized shapes for certain servers are possible. Note A developer quickly can find the pixel coordinates on an image by using the xv viewing program or some similar graphics program discussed in the preceding chapter. Also, programs to help draw imagemaps are available. MapEdit (http://www.boutell.com/mapedit/) by Tom Boutell, for example, is very useful. For others programs, see http: //www.yahoo.com/Computers/World_Wide_Web/Programming/Imagemaps/. Add a reference to the mapfile in the HTML file. This reference identifies the imagemap program that exists on the server as well as the mapfile. The server might be host.domain, for example, with the imagemap program located at cgi-bin/imagemap. The user loginid can reference the mapfile at ~loginid/path/info.map by this reference in the HTML file for NCSA httpd servers (version 1.4 and later). In the HTML file, add this line: <A Href="http://host.domain/cgi-bin/imagemap/~loginid/path/info.map"> In the HTML, include the Ismap attribute on the IMG element and refer to the graphics image in the Src attribute: <IMG Src="info.gif" Ismap></A> For other servers, the reference line varies: for W3C httpd: http://host.domain/cgi-bin/htimage/~loginid/path/info.map for Windows httpd: http://host.domain/cgi-win/imagemap.exe/~loginid/path/info.map for servers (such as Netscape's) that have the imagemap program built in: http://host.domain/~loginid/path/info.map As described previously, imagemaps usually are implemented with several files, as illustrated in Figure 16.5. First, there is the HTML file containing the image (such as shown in Fig. 16.1), which contains the image and identifies the location of the mapfile and the path to the imagemap program on the server. Second, the mapfile itself identifies the resource to be retrieved based on the pixel coordinates of the user click. Figure 16.5 : Server-side imagemap file relationships. Other servers might require an intermediate configuration file to make a correspondence between a symbolic name for the mapfile given in the HTML file and the path name of the mapfile. A Server-Side Imagemap Example In order to show how all the pieces for a typical imagemap are put together, this section shows an example of an imagemap used on an NCSA server. The key lines in an HTML file for an imagemap are of this form: <A Href="http://host.domain/cgi- bin/imagemap/~loginid/path/info.map"> <IMG Src="info.gif" Ismap></A> The user kevin on the NCSA server host.domain can create an imagemap by using this code: <HTML> <HEAD>  <TITLE>Imagemap</TITLE> </HEAD> <BODY> <A Href="http://host.domain/cgi-bin/remoteimage/~kevin/public_html/maps/bar.map"> <IMG Src="http://host.domain/~kevin/images/bar.gif" Ismap></A> </BODY> </HTML>  Assume that the user created a 45¥400 pixel image. The mapfile /~kevin/public_html/maps/bar.map follows: default http://host.domain/~kevin/index.html rect http://host.domain/~kevin/works/top.html 0,0 45,45 rect http://host.domain/~kevin/works/stories.html 46,0 120,45 rect http://host.domain/~kevin/works/poems.html 121,0 210,45 rect http://host.domain/~kevin/cmc/study.html 211,0 295,45 rect http://host.domain/~kevin/works/book.html 296,0 360,45 rect http://host.domain/~kevin/sound/beverage.au 360,0 400,45 By using the transparent technique for making GIF files, images in a map can appear as if they are separate. Also, in the mapfile, every region corresponding to a URL does not need to be a visible feature. In the example, the mapping to the right-most region of the image is to http: //host.domain/~kevin/sound/beverage.au. Client-Side Imagemaps The only difference with the client-side imagemap is that you put the information from the mapfile right into the HTML file containing your image. You do this in the MAP element. The MAP element has one attribute, Name, which you set to the name you use as the value of the Usemap attribute of the corresponding IMG element. The MAP elements contain AREA elements that relate areas on the image to URLs. AREA elements have these attributes: Coords  Identifies the coordinates of the outline of the shape <AREA Shape="rect" Coords="left,top,right,bottom" Href="URL" > <AREA Shape="poly" Coords="x1,y1,x2,y2,...xn,yn" Href="URL " > <AREA Shape="circle" Coords="x,y,radius" Href="URL" > Href   Identifies the URL associated with the hotspot Nohref  Specifies that the hotspot has no resource associated with it Shape  Can be circle, rect, poly, or default A Client-Side Imagemap Example Let's put this syntax together in a simple example. In the HTML source, this client-side imagemap consists of two parts: The MAP and AREA elements to associate the image areas with URLs. The Name attribute of the MAP element names the imagemap. The IMG element to embed the image in the page with an Ismap attribute and the Usemap attribute set to the name of the imagemap. Here's the HTML sections to define the map: <MAP Name="mymap"> <AREA Shape="circle"  Coords="70,84,51"       Href="http://www.december.com"> <AREA Shape="rect"    Coords="25,180,125,280"       Href="http://www.december.com/html/"> <AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167"       Href="http://www.december.com/works/tour.html"> <AREA Shape="rect"    Coords="422,17,480,277"       Nohref> <AREA Shape="circle"  Coords="499,299,100"       Href="http://www.cnn.com/"> <AREA Shape="default" Coords="0,0,195,111"       Href="http://www.december.com/john/"> </MAP> I create an image and include a reference to it like this: <IMG Src="../images/imagemap.gif" Width="500" Height="300"         Alt="Imagemap" Usemap="#mymap" Ismap> Figure 16.6 shows its final result. Figure 16.6 : A sample client-side imagemap. Notice that the image used here is a single graphics file. In the image, I associate each colored shape in the gray background with a different action. The circle is linked to my company home page. The HTML Station box is linked to the index of that web. The convex polygon is linked to my tour page. The Blank Zone rectangle is a "no link" image. The gray background is linked to my home page. Notice how the sensitive spots change along the shape borders. I used the xv UNIX tool to locate the coordinates of these shape borders. You don't need to have a visual indication of a hotspot in an imagemap, of course. Check out the lower right-hand corner of the image, directly below the Blank Zone rectangle. I've created a link there to the CNN Web site. Imagemap Check Imagemaps are a powerful way to give users a way to select from a large amount of choices, because every pixel of an imagemap can correspond to a resource-to the URL of another HTML page, a sound file, another image, or any other resource. You create an imagemap by the connection between an image and a list of resources corresponding to areas on that image. The processing of a user's click on the image can be done through the server or through the client. For backward compatibility, you might implement both methods. Client-side imagemap processing can be done using the MAP element and the Usemap attribute of the IMG element for Netscape Navigator browsers. Another client-side imagemap processing technique involves using the Java programming language.