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:
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. |