Exercise Two

Creating a Client-Side Imagemap

In this exercise, you will create an imagemap using the coordinates you derived from the image in Exercise One; this imagemap will become the navigation for the frame site you worked on in Module 7. You can download ALL the files you'll need for this exercise from the links at the bottom of this page.

Instructions

1. Open "leftPage.htm". Using the IMG tag, add "widgetNav.gif" to "leftPage.htm"; don't forget the WIDTH and HEIGHT attributes. Mark "widgetNav.gif" using the DIV tag with its ALIGN attribute set equal to "center"; this will cause the image to center on the page.
2. Add a MAP tag to "leftPage.htm"; set its NAME attribute equal to "widgetNav".
3. Put four AREA tags into your MAP tag. Using the shapes and coordinates you derived during Exercise One, program your imagemap information into these AREA tags.
4. The HREF for the "Widgets" AREA tag should be "./displayPage1.htm".
5. The HREF for the "Gadgets" AREA tag should be "./displayPage2.htm".
6. The HREF for the "Dingbats" AREA tag should be "./displayPage.htm".
7. The TARGET for all three AREA tags above should be "main" (the name of the rightmost frame).
8. The HREF for the "Email*" AREA tag should be "mailto:info@widget.com".
9. Set the BORDER attribute of the "widgetNav.gif" IMG tag equal to "0".
10. Set the USEMAP attribute of the "widgetNav.gif" IMG tag equal to "#widgetNav".
11. Test your client-side imagemap in a browser. Make corrections, as needed.
12. Add a redundant text-based navigation below the current image, duplicating all of the links on the imagemap; place this text navigation inside a center-aligned P tag. Test site again; make corrections, as needed.

View Solution Code (abbreviated) for "leftPage.htm".

Download Exercise Files
Mac Files (.sit -- 14K)
PC Files (.zip -- 10K)

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.