Creating Client-Side Imagemaps

After you have the coordinates written down, you're ready to create an HTML imagemap. The following HTML code is required to start any imagemap:

 <map >

By the Way

Prior to XHTML, the id and name attributes played the same role in the <map> tag, so you could have also entered the previous code as this:

 <map name="skatepark">

However, XHTML standards require the use of id instead of name, which is why I've stuck with it throughout this lesson (and the rest of the book, for that matter).

Keep in mind that you can use whatever name you want for the id of the <map> tag, although it helps if you make it as descriptive as possible. If skateparkmap doesn't describe the image you're using very well, feel free to change it.

Next on the agenda is an <area /> tag for each region of the image. Following is an example of a single <area> tag that is used in the skatepark imagemap example:

 <area shape="rect" coords="536, 24, 610, 89" href="skatepark_spikepipe.jpg" alt="Spike Pipe" />

This <area /> tag has four attributes, which you will use with every area you describe in an imagemap:

shape indicates whether the region is a rectangle (shape="rect"), a circle (shape="circle"), or an irregular polygon (shape="poly").
coords gives the exact pixel coordinates for the region. For rectangles, give the x,y coordinates of the upper-left corner followed by the x,y coordinates of the lower-right corner. For circles, give the x,y center point followed by the radius in pixels. For polygons, list the x,y coordinates of all the corners, in connect-the-dots order.
href specifies the page to which the region links. You can use any address or filename that you would use in an ordinary <a href> link tag.
alt allows you to provide a piece of text that is associated with the shape. Most browsers (not Firefox) display this text in a small box when the user pauses with the mouse over the shape. This text adds a subtle but important visual cue to users who might not otherwise realize that they are looking at an imagemap. Firefox correctly uses the title attribute instead of the alt attribute to provide a visual cue, which is why you should strongly consider providing both attributes for images.

Every distinct clickable region in an imagemap must be described as a single area, which means a typical imagemap consists of a list of areas. After coding the <area /> tags, you are done defining the imagemap, so wrap things up with a closing </map> tag.

The last step in creating an imagemap is wiring it to the actual map image. The map image is placed on the page using an ordinary <img /> tag. However, there is an extra usemap attribute that is coded like this:

 <img src="/books/4/158/1/html/2/skatepark.png" alt="Nashville Public Skatepark" title="Nashville Public Skatepark" usemap="#skateparkmap" style="border:none" />

When specifying the value of the usemap attribute, use the name you put in the id of the <map> tag (and don't forget the # symbol). In the listing I also included the style attribute to turn off the border around the imagemap, which you may or may not elect to keep in imagemaps of your own.

By the Way

It is also possible to put the map definition in a separate file by including that file's name in the usemap attribute, like this:

 <img src="/books/4/158/1/html/2/thisthat.gif" usemap="maps.htm#thisthat">

For instance, if you used an imagemap on every page in your web site, you could just put the <map> and <area> tags for it on one page instead of repeating them on every page on which the imagemap appears.

Listing 10.3 shows the complete code for the skatepark imagemap sample web page, including the imagemap and all of its areas.

Listing 10.3. The `<map>` and `<area />` Tags Define the Regions of an Imagemap

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Nashville Public Skatepark (Concrete Wave Country)</title>   </head>   <body>     <h1>Nashville Public Skatepark (Concrete Wave Country)</h1>     <p>       Below is a map of Nashville's public skatepark, also known as       Concrete Wave Country. Drag the mouse over the map and click to       learn more about each area and obstacle.     </p>     <p style="text-align:center">       <map >         <area shape="rect" coords="536, 24, 610, 89"         href="skatepark_spikepipe.jpg" alt="Spike Pipe" />         <area shape="rect" coords="461, 43, 535, 78"         href="skatepark_coachscorner.jpg" alt="Coach's Corner" />         <area shape="rect" coords="342, 170, 422, 218"         href="skatepark_barnstormer.jpg" alt="Barnstormer" />         <area shape="rect" coords="392, 69, 460, 114"         href="skatepark_mitchellsmeadow.jpg" alt="Mitchell's Meadow" />         <area shape="rect" coords="311, 87, 391, 118"         href="skatepark_miabowl.jpg" alt="MIA Bowl" />         <area shape="circle" coords="510, 94, 30"         href="skatepark_bubbabowl.jpg" alt="Bubba Bowl" />         <area shape="circle" coords="499, 135, 25"         href="skatepark_flumezoom.jpg" alt="Flume Zoom" />         <area shape="circle" coords="98, 243, 28"         href="skatepark_orangepeel.jpg" alt="Orange Peel" />         <area shape="poly" coords="323, 134, 309, 154, 343, 166, 358, 139,         345, 119, 311, 116" href="skatepark_horseyhip.jpg"         alt="Horsey Hip" />         <area shape="poly" coords="227, 229, 254, 243, 273, 267, 247, 281,         206, 278, 203, 244" href="skatepark_devansdivide.jpg"         alt="Devan's Divide" />       </map>       <img src="/books/4/158/1/html/2/skatepark.png" alt="Nashville Public Skatepark" alt="Nashville       Public Skatepark" usemap="#skateparkmap" style="border:none" />     </p>   </body> </html>

By the Way

If you're a stickler for details, you might have noticed that this web page is coded as an XHTML 1.0 document, as opposed to XHTML 1.1 like most of the other examples in the book (check out the first few lines of code). The reason for this has to do with the fact that some browsers, Internet Explorer for one, are lagging in their support for one small XHTML 1.1 change in how imagemaps are used. I'm referring to the usemap attribute, which in XHTML 1.1 doesn't require the # symbol in front of the map name. In fact, it's not allowed in XHTML 1.1, which is why I designated this document as XHTML 1.0. The # symbol is allowed in XHTML 1.0, so to satisfy current web browsers and still provide you with a valid web page, I opted to go with XHTML 1.0 for this particular example.

Figure 10.8 shows the imagemap in action. Notice that Microsoft Internet Explorer displays the link address for whatever area the mouse is moving over at the bottom of the window, just as it does for "normal" links. Additionally, the alt text for an area is displayed on the imagemap if you pause with the mouse over the area.

Figure 10.8. The imagemap defined in Listing 10.3 as it appears on the web page.

Did you Know?

You may want to include text links at the bottom of your imagemap that lead to the same pages the map itself links to. This allows people who have older web browsersor who don't want to wait for the image to finish loadingto access those pages.

If you click where the alt text is shown in Figure 10.8, the image named skatepark_flumezoom.jpg opens in the browser. In fact, Figure 10.9 shows an image of my friend Paul Sexton riding the Flume Zoom that appears after the Flume Zoom obstacle is clicked on the imagemap.

Figure 10.9. Each area on the skatepark imagemap links to a photo of that particular skateboard obstacle.

By the Way

By the Way

Listing 10.3. The <map> and <area /> Tags Define the Regions of an Imagemap

By the Way

Figure 10.8. The imagemap defined in Listing 10.3 as it appears on the web page.

Did you Know?

Figure 10.9. Each area on the skatepark imagemap links to a photo of that particular skateboard obstacle.

Listing 10.3. The `<map>` and `<area />` Tags Define the Regions of an Imagemap