Swapping Out Image Maps
This chapter is from the book
This chapter is from the book
This chapter is from the book
IN THIS CHAPTER
-
The Scenario
-
Multiple Image Maps in HTML
-
Image Map Information in JavaScript
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.
The Scenario
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
Notice that all three of the submenus are in the same physical place, but they all require completely different image maps in order to work. In this chapter, we'll look at two different ways to use the appropriate image map for each image. The first way involves keeping the image map information in the HTML of the page, and the second keeps all of the information in JavaScript. We'll start by looking at keeping the maps in HTML.