Developing a Web Site - HTML, CSS, and Dynamic HTML - page 108

Apply the logomap image map to the CAMshots logo and then test it in your Web
browser.

To apply the logomap image map:

◗

1. Add the following attribute to the <img> tag for the CAMshots logo, as shown in
Figure 2-35:

usemap=”#logomap”

Figure 2-35 Applying the logomap image map

referencing the imag e map
with the usemap attribute

◗

2. Save your changes to the file and then reload or refresh the home.htm file in your
Web browser.

◗

3. Click anywhere within the word Tips in the header image and verify that the
browser opens the Tips page.

◗

4. Return to the home page and click anywhere within the words Photo Glossary in
the header image to verify that the browser opens the Glossary page.

Now that you've created an image map for the logo on the home page, you can create
similar image maps for the logos on the Tips and Glossary pages.

To add image maps to the other Web pages:

◗

1. Return to the tips.htm file in your text editor.
◗

2. Replace the code within the header element with the code shown earlier in
Figure 2-34. (Hint: You can use the copy and paste feature of your text editor to
copy the code from the home.htm file into the tips.htm file.)

◗

3. Save your changes to the file.
◗

4. Go to the glossary.htm file in your text editor.
◗

5. As you did for the tips.htm file, replace the code within the header element for
the inline image with the code from the home.htm file. Save your changes to
the file.

◗

6. Reload the home.htm file in your Web browser and verify that you can
switch among the three Web pages by clicking the hotspots in the CAMshots
header image.