Creating Client-Side Image Maps


Let's get started. After you have an image and have determined the coordinates for each piece of the image, you can begin mapping your image in HTML. The following HTML sample shows the image map I created for the navigation bar shown in Figure 9.1:

<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Image Maps</title> <style type="text/css"> body {text-align="center"} </style> </head> <body> <map name="NavBar" > <area shape="rect" coords="270, 91, 416, 138"       href="resources.htm" alt="resources" " /> <area shape="rect" coords="139, 117, 287, 166"       href="services.htm" alt="services" "" /> <area shape="rect" coords ="139, 61, 290, 111"       href="about.htm" alt="about us" /> <area shape="rect" coords ="5, 84, 157, 139"       href="default.htm" alt="home page" /> </map> <img src="/books/1/174/1/html/2/redcircles.jpg" width="424" height="166"      alt="My Nav Bar" border="0" usemap="#NavBar" /> </body> </html>


Look at the HTML example for image maps a little closer:

  • <map name="x" > Every image map needs a name and an id. It works just like the named anchor tag <a> you saw in Lesson 4, "Linking Text and Documents." It identifies the section of the HTML document that you want to reference from your image.

  • <area shape="w" coords="x" href="y" alt="z" /> An <area /> tag is required for each portion of an image that will be linked. It identifies the shape of that portion, the coordinates for it, and the URL to which it will lead.

  • </map> This tag closes the preceding <map name> tag.

  • usemap="#Map Name" usemap is an attribute of the <img /> tag. It points the Web browser to the correct image map for this image. Notice the # sign that precedes the map name; it works just like creating a hyperlink to a named anchor within the current document.

The Web browser sees the image map and knows that the image will be linked. In Figure 9.3, you can see that the mouse pointer changes into a hand when it hovers over a portion of the image that is mapped, as it does when placed over any other hyperlink.

Figure 9.3. The image from Figure 9.2 displayed in the Web browser.




Sams Teach Yourself HTML in 10 Minutes
Sams Teach Yourself HTML in 10 Minutes (4th Edition)
ISBN: 067232878X
EAN: 2147483647
Year: 2004
Pages: 151
Authors: Deidre Hayes

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net