Chapter
15 Chapter 15Image MapsIf you've read Chapter 9, "Putting Images on a Web Page," you know how to make an image link to another document. (If you don't quite recall how to do it right now, it looks like this: <A HREF="gohere.asp"><IMG SRC="image.gif"> </A>.) You can also subdivide an image into regions that link to different documents, depending on where someone clicks. This is called an image map, and any image can be made into an image map. A Web site with medical information might show an image of the human body and bring up different pages of advice for each body part. Or a map of the world could allow people to click on any country for regional information. Many people use image maps to create a "navigation bar" that integrates icons for each page on their Web site into one cohesive image map. Netscape Navigator and Microsoft Internet Explorer allow you to choose between two different methods for implementing image maps. Nowdays, all your image maps should be done using the latest method, which is called a client-side image map. You may also want to make them work the old-fashioned server-side way for users of older browser programs. I explain both kinds of image maps in this chapter.
Mapping Regions Within an ImageTo make any type of image map, you'll need to figure out the numerical pixel coordinates of each region within the image that you want to be a clickable link. An easy way to do this is to open the image with Paint Shop Pro and watch the coordinates at the bottom of the screen as you use the rectangle selection tool to select a rectangular region of the image (see Figure 15.1). When the mouse button is down, the coordinates at the bottom of the screen show both the top-left and bottom-right corners of the rectangle, instead of just a single x,y position as shown here.
Figure 15.1. Paint Shop Pro can easily tell you the
coordinates for image map regions without mucking about with special image- mapping
utilities. These coordinates are: George Washington (region 1): 40,10 to 130,130 Thomas Jefferson (region 2): 130,60 to 200,170 Teddy Roosevelt (region 3): 201,120 to 270,240 Abraham Lincoln (region 4): 280,120 to 380,250 Figure 15.2. You don't actually have to draw anything that looks like this. I just made it to show you which regions in Figure 15.1 will become clickable links. To Do: You'll remember how to make image maps better if you get an image of your own and turn it into an image map as you read the following explanation.
Client-Side Image MapsOnce you have the coordinates written down, you're ready to create an HTML image map. Just after the <BODY> tag in your Web page, put <MAP NAME="heads"> (You can use whatever name you want if "heads" seems too disrespectful of our late great leaders.) Now you need to type an <AREA> tag for each region of the image. Figure 15.3 shows how you would define the four regions of the Mount Rushmore image. Figure 15.3. The <MAP> and <AREA> tags define the regions of an image map. Each <AREA> tag in Figure 15.3 has three attributes:
After the <AREA> tags, you are finished defining the image map, so you insert a closing </MAP> tag. To place the actual image map on the page, you use an ordinary <IMG> tag, and add a USEMAP attribute: <IMG SRC="rushmore.gif" USEMAP="#heads"> Use the name you put in the <MAP> tag (and don't forget the # symbol). In Figure 15.3, I also included WIDTH and HEIGHT attributes, as you should for any image on a Web page.
Figure 15.4 shows the image map in action. Notice that Netscape Navigator displays the link address for whatever region the mouse is moving over at the bottom of the window, just as it does for "normal" links. If someone clicked where the mouse cursor (the little hand) is shown in Figure 15.4, the page named george.asp would come up. Figure 15.4. The image map defined in Figure 15.3 as it appears on the Web page.
Image Maps with Non-rectangular RegionsSome images don't lend themselves to being broken up into neat rectangular regions. The image in Figure 15.5, for example, would make a great image map--but the regions you would want to click on couldn't be defined just by specifying the top-left and bottom-right corners. Figure 15.5. To divide this image into regions, you need more shapes than just upright rectangles. Fortunately, HTML image maps let you create polygonal regions with any number of corners. You can also define circular regions, which would be handy for the "ETHER" region in Figure 15.5. I've sketched the clickable regions for this image map in Figure 15.6. Figure 15.7 shows the HTML to define the actual image map, and Figure 15.8 shows the resulting Web page. To make polygonal regions, use SHAPE="poly" in the <AREA> tag, and put each of the corner points in the COORDS attribute. For circular regions, use SHAPE="circle" and put the center point and radius (in pixels) in the COORDS attribute. Figure 15.6. Triangular and circular regions would work much better than rec-tangular ones for the image in Figure 15.5. Figure 15.7. A page defining the image map regions shown in Figure 15.6. Figure 15.8. This is how the image map in Figure 15.7 appears to a reader about to click on the "AIR" link. Instead of including text links on the page in Figures 15.7 and 15.8, I used a tricky little attribute of the <IMG> tag called ISMAP. If you put ISMAP in an image tag, you can also put an <A HREF> link around the image. That link will only work for older browsers that don't support client-side image maps. The nomaps.asp file I linked to might lead to a page of text links, or simply a page saying Sorry, your browser is too old and feeble to handle the client-side image map on my awesome Web page (not necessarily in so many words).
The old-fashioned way to create an image map is to let the server computer where the Web page resides do all the work. Most Web authors don't bother with server-side image maps anymore, because it's easier and just as effective to provide text links for people using older browsers. But there are still an awful lot of people out there using pre-1995 Web browsers, and it isn't really that hard to make your image maps work for them. You can read the following explanation of what's involved and decide for yourself whether it's worth your time to provide server-side image maps. When the user clicks an image that has been mapped this way, the browser program just sends the x,y coordinates of the mouse pointer's location to a special script on the server. Usually, this script is located in some subdirectory of cgi-bin on the server, and the HTML to implement the image map is just a normal anchor link. <A HREF="/cgi-bin/imagemap/thisthat"><IMG SRC="thisthat.gif" ISMAP></A> Simple. But when you install a Web page including such a link, you need to tell the image map script which parts of the image should be associated with which link addresses. This is normally done in a map file. Each line in the map file is simply the word rect followed by a URL address and two sets of x,y coordinates representing the top-left corner and the bottom-right corner of a region of the image. Some server scripts also support non-rectangular regions with the word poly and circle (or round). The first line in a map file begins with the word default followed by the URL address that should be used if the user happens to click outside any rectangular region defined by a rect line. A map file named thisthat.map might look like this: default /top/this.asp rect /top/this.asp 0,0,102,99 rect /top/that.asp 103,0,205,99 The final step in setting up a server-side image map is telling the image map script which map file to use for which image by adding a line to a system file named imagemap.conf. This file will already exist and includes entries for every image map defined on the server. You simply add a line with the name used in the HREF attribute of the <A> tag, a colon, and then the actual location and name of the associated map file. For example, the previous reference is HREF="/cgi-bin/imagemap/thisthat", and the preceding map file is named thisthat.map. If this map file was in a directory named /mapfiles, the line in imagemap.conf would read thisthat : /mapfiles/thisthat.map All this isn't nearly as difficult as it may sound if you've never set up an image map before, but it can be a hassle, especially if your pages reside on somebody else's server and you don't have the rights to modify system files such as imagemap.conf yourself. What's worse, server-side image maps don't work at all on Web pages located on your hard drive, a CD-ROM, or most local networks. There are also some variations in the exact syntax for image map implementation, depending on the software installed on your server. So if you move your pages to a different server, the image maps may not work anymore. Yuck. Fortunately, the latest versions of all the major browsers support the client-side image maps discussed earlier in this chapter, where the association of links with specific regions in an image is handled by the browser itself instead of a server script. This means that you can include image maps in your HTML files without imposing an additional burden on your Internet service provider's server, and you can be more certain that they will be processed correctly and dependably. Combined Client/Server Image MapsThere is a way for you to provide client-side image maps that automatically switch to server-side image maps if the user's browser doesn't support client-side maps. With a single line of code, you can allow an image map to be interpreted either by the end user's software or by the server by including the ISMAP attribute in the <IMG> tag, then including both a USEMAP= attribute and cgi-bin/imagemap reference. <MAP "#thisthat"> <AREA SHAPE="rect" COORDS="0,0,102,99" HREF="this.asp"> <AREA SHAPE="rect" COORDS="103,0,205,99" HREF="that.asp"></MAP> <A HREF="/cgi-bin/imagemap/thisthat"> <IMG SRC="thisthat.gif" USEMAP="#thisthat" ISMAP></A> Here, as with any unrecognized tag, browsers that don't support client-side image maps will simply ignore the <USEMAP> and <ISMAP> tags and treat the preceding code like an old-fashioned server-side image map. SummaryThis chapter explained how to create image maps--links that lead to more than one place, depending on where you click on an image. You saw how to define rectangular and circular link regions within an image, as well as irregularly shaped polygonal regions. You also learned to provide an alternate link just for people using older browsers that don't support the current image map standard. Finally, you got a quick rundown on providing server-side image maps on most types of Web servers--just in case you want to provide the best possible experience for users of outdated browsers. Table 15.1 is a summary of the tags and attributes
covered in this chapter.
Q&A
Quiz Questions
Answers
Activities
|