Swapping Out Image Maps
- The Scenario
IN THIS CHAPTER
Multiple Image Maps in HTML
There are several ways to dynamically change an image's image map. This can be useful on a home page where a central image serves as the submenu for several navigation items. Unfortunately, the easy ways to accomplish this require methods that aren't available to Netscape 4. Thus, this chapter focuses on altering image maps for IE5+ and Netscape 6 and above. This may ruffle the feathers of some browser purists, but I believe that the time is coming (and soon; possibly by the time you have this book in your hands) when it will be no longer be standard practice to code for the 4.x browsers. Either that or everyone will start using Flash, which works in all browsers but requires a plug-in.1 We do look at swapping out image maps for Netscape 4.x, but it will require delving into capturing events, which we don't cover until Chapter 10. So if you must consider Netscape 4 while swapping out image maps, please skip ahead to Chapter 10. You can come back to this chapter any time. It'll be here.
We start again with a Web site for Shelley Biotech, as we did in Chapter 1. The home page will still feature rollovers (though much more subtle ones). We start with a super-simple home page that looks like Figure 3-1.
Figure 3-1. Simple Shelley home page
We have rollovers that change the black navigation text (“news,” “products,” and so on) to a blue color. That's it. However, when the user clicks the navigation image, a large submenu appears, as in Figure 3-2.
Figure 3-2. Products submenu
Clicking “Research” will result in the submenu in Figure 3-3
Figure 3-3. Research submenu
And clicking “Store” will result in Figure 3-4.
Figure 3-4. Store submenu