Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

2017-07-07 02:10:07

Why Imagemaps Aren't Always Necessary

The first thing I must say about imagemaps is that you probably won't need to use them except in very special cases! It's almost always easier and more efficient to use several ordinary images, placed right next to one another, with a separate link for each image.

As an example, consider a graphic that can be described by separate rectangular regions. One good example involves an illustration of an ice hockey rink, which could be used to highlight the rule changes introduced by the National Hockey League (NHL) for the 2005 season. Figure 10.1 shows an example of such an image. The obvious approach for using this rink graphic on a web page is to use a single imagemap for the image and then link specific regions of it to more detailed information.

Figure 10.1. An ice rink image makes for a good example of how to map regions of an image to different web pages.

However, the better solution in this case is to cut the graphic into vertical strips using an image editor such as Photoshop or Paint Shop Pro, and then make each piece a separate image on the web page. The images can be arranged close together so that they appear as one complete graphic. The advantages are that the page is backward compatible with ancient web browsers and the code is a little simpler because you aren't mathematically describing regions within a single image. Figure 10.2 shows how to cut up the ice rink graphic so that each link area is a separate image; the figure actually shows the images for the left side of the rink.

Figure 10.2. To avoid using imagemaps, you need to cut the image shown in Figure 10.1 into these six images for the left side of the rink. (Cut and paste using the rectangular selection tool.)

By the Way

The image editor used in Figure 10.2 is Microsoft Photo Editor, which ships with Microsoft Office. It's a very minimal photo editor but it works fine for slicing and dicing images, as in this example.

Listing 10.1 shows the HTML code that creates a web page using the sliced ice rink images shown in Figure 10.2. The figure actually shows only the images for the left side of the rinkthere are additional images for the right side of the rink that look very similar.

Listing 10.1. Using Sliced Images to Implement a Simulated Imagemap

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>NHL Rule Changes</title> </head> <body> <h1>NHL Rule Changes</h1> <p> Following is a graphical representation of some of the new NHL rule changes, and how they will affect the ice in 2005 and beyond. </p> <p > <a href="nhltrapzone.html"><img src="/books/4/158/1/html/2/nhlrink01.png" alt="Goalie Trap Zone" title="Goalie Trap Zone (click to learn more)" /></a> <a href="nhlgoallines.html"><img src="/books/4/158/1/html/2/nhlrink02.png" alt="Goal Line" title="Goal Line (click to learn more)" /></a> <a href="nhloffensivezone.html"><img src="/books/4/158/1/html/2/nhlrink03.png" alt="Offensive Zone" title="Offensive Zone (click to learn more)" /></a> <a href="nhlbluelines.html"><img src="/books/4/158/1/html/2/nhlrink04.png" alt="Blue Line" title="Blue Line (click to learn more)" /></a> <a href="nhlneutralzone.html"><img src="/books/4/158/1/html/2/nhlrink05.png" alt="Neutral Zone" title="Neutral Zone (click to learn more)" /></a> <a href="nhlcenterline.html"><img src="/books/4/158/1/html/2/nhlrink06.png" alt="Center Red Line" title="Center Red Line (click to learn more)" /></a> <a href="nhlneutralzone.html"><img src="/books/4/158/1/html/2/nhlrink07.png" alt="Neutral Zone" title="Neutral Zone (click to learn more)" /></a> <a href="nhlbluelines.html"><img src="/books/4/158/1/html/2/nhlrink08.png" alt="Blue Line" title="Blue Line (click to learn more)" /></a> <a href="nhloffensivezone.html"><img src="/books/4/158/1/html/2/nhlrink09.png" alt="Offensive Zone" title="Offensive Zone (click to learn more)" /></a> <a href="nhlgoallines.html"><img src="/books/4/158/1/html/2/nhlrink10.png" alt="Goal Line" title="Goal Line (click to learn more)" /></a> <a href="nhltrapzone.html"><img src="/books/4/158/1/html/2/nhlrink11.png" alt="Goalie Trap Zone" title="Goalie Trap Zone (click to learn more)" /></a> </p> </body> </html>

Figure 10.3 shows the results of this code, which may not be quite what you were expecting.

Figure 10.3. Although the image slices are arranged properly, the small spaces ruin the simulated imagemap effect.

The problem with this code has to do with the fact that the code includes line breaks between the <a> tags, which effectively means that there are line breaks between the images. Such line breaks result in small spaces being placed on the page between the images. The solution is to modify the code so that the line breaks fall in the middle of each tag, as opposed to in between adjacent tags. Listing 10.2 shows a slightly different version of this code with the line break problem resolved.

Listing 10.2. Rearranging the Line Breaks in the Code Solves the Spacing Problem on the Page

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>NHL Rule Changes</title> </head> <body> <h1>NHL Rule Changes</h1> <p> Following is a graphical representation of some of the new NHL rule changes, and how they will affect the ice in 2005 and beyond. </p> <p > <a href="nhltrapzone.html"><img src="/books/4/158/1/html/2/nhlrink01.png" alt="Goalie Trap Zone" title="Goalie Trap Zone (click to learn more)" /></a><a href="nhlgoallines.html"><img src="/books/4/158/1/html/2/nhlrink02.png" alt="Goal Line" title="Goal Line (click to learn more)" /></a><a href="nhloffensivezone.html"><img src="/books/4/158/1/html/2/nhlrink03.png" alt="Offensive Zone" title="Offensive Zone (click to learn more)" /></a><a href="nhlbluelines.html"><img src="/books/4/158/1/html/2/nhlrink04.png" alt="Blue Line" title="Blue Line (click to learn more)" /></a><a href="nhlneutralzone.html"><img src="/books/4/158/1/html/2/nhlrink05.png" alt="Neutral Zone" title="Neutral Zone (click to learn more)" /></a><a href="nhlcenterline.html"><img src="/books/4/158/1/html/2/nhlrink06.png" alt="Center Line" title="Center Line (click to learn more)" /></a><a href="nhlneutralzone.html"><img src="/books/4/158/1/html/2/nhlrink07.png" alt="Neutral Zone" title="Neutral Zone (click to learn more)" /></a><a href="nhlbluelines.html"><img src="/books/4/158/1/html/2/nhlrink08.png" alt="Blue Line" title="Blue Line (click to learn more)" /></a><a href="nhloffensivezone.html"><img src="/books/4/158/1/html/2/nhlrink09.png" alt="Offensive Zone" title="Offensive Zone (click to learn more)" /></a><a href="nhlgoallines.html"><img src="/books/4/158/1/html/2/nhlrink10.png" alt="Goal Line" title="Goal Line (click to learn more)" /></a><a href="nhltrapzone.html"><img src="/books/4/158/1/html/2/nhlrink11.png" alt="Goalie Trap Zone" title="Goalie Trap Zone (click to learn more)" /></a> </p> </body> </html>

Notice that this time around I was very careful not to put any spaces or line breaks in between any of the <a> or <img /> tags. Again, a space or line break between these tags creates a small space between the images on the page, and the illusion of everything fitting together into one big image is totally destroyed. Figure 10.4 shows the results of the fixed code, in which the ice rink finally appears as you intended it to look.

Figure 10.4. You can create this page using ordinary `<img />` tags and `<a href>` links; imagemaps aren't always necessary.

Hovering over the ice rink shows the alt text for each sliced image, which helps to provide a clue regarding the image's meaning. Clicking any part of the rink displays a web page with details about the NHL rule changes that affect that particular portion of the rink. Figure 10.5 shows the rule changes that impact the blue lines, which delineate the offensive zones in hockey.

Figure 10.5. Each region of the ice rink imagemap links to a page with more detailed information about that specific region.

So I've proven that it's possible to get the illusion of an imagemap without actually using an imagemap. This begs the question, when would you want to use an imagemap, then? Only when the parts of an image you want to link are so numerous or oddly arranged that it would be a big hassle to chop the image into smaller images.

That does happen from time to time, so it's a good idea to know how to create imagemaps when you truly need to. The rest of this hour shows you how.