- Shelley Biotech Example
- Preloading Images
- Mouseovers and Submenus
- Mouseovers and Stylesheets
- Recap
Mouseovers and Submenus
We're not getting real fancy yet. If you want to get fancy, steel yourself and skip ahead to Chapter 12, which dives deep into DHTML and hierarchical menus. If you'd like just a single submenu for your Web site, keep reading.
Let's create a little submenu for the products menu item. It should look something like Figure 15.
Figure 15 Product submenu
This menu is really one big rollover with five (yes, five) different states. These states are:
- No rollover
- Rollover "Products"
- Roll over "BioHomeLab 2.0"
- Roll over "Focusyn"
- Roll over "Sinoplug"
Figure 16 shows all of these images.
Figure 16 All the submenu images
As you might expect, the code doesn't change very much in order to handle this new set of images. First, let's look at preloading these new images in Example 19.
Example 19 Preloading the submenu items
productsOff = new Image() productsOff.src = "images/products_sub_off.gif" productsOn = new Image() productsOn.src = "images/products_sub_on.gif" productsSub1On = new Image() productsSub1On.src = "images/products_sub_1.gif" productsSub2On = new Image() productsSub2On.src = "images/products_sub_2.gif" productsSub3On = new Image() productsSub3On.src = "images/products_sub_3.gif"
This is pretty similar to what we've seen before. We've changed our naming scheme a bit from "nav_products" to "products_sub", but there are no major differences. Let's look at the HTML that calls the rollover functions. Since the only thing that's changing in the HTML (well, almost, but the other things are small, and we'll deal with them later) is the product image, we'll examine that table cell in Example 110.
Example 110 Submenu HTML
<td> _<img src="images/products_sub_off.gif" width="111" height="127" border="0" name="products" usemap="#productsMap"> <map name="productsMap"> <area shape="rect" _onMouseOver="javascript:rollOver('productsSub3')" _onMouseOut="javascript:rollOut('products')" coords="0,94,102,116" href="products/sinoplug/"> <area shape="rect" onMouseOver="javascript:rollOver('productsSub2')" onMouseOut="javascript:rollOut('products')" coords="0,77,104,94" href="products/focusyn/"> <area shape="rect" onMouseOver="javascript:rollOver('productsSub1')" onMouseOut="javascript:rollOut('products')" coords="0,54,104,77" href="products/biohomelab2/"> <area shape="rect" onMouseOver="javascript:rollOver('products')" onMouseOut="javascript:rollOut('products')" coords="0,0,91,54" href="products/"> </map> </td>
How the Code Works
To handle this whole submenu thing, we create a single image and put an image map on top of it.
Notice that the name of the image is still "products." That will become important later, when we look at the JavaScript.
The onMouseOver is what you'd expect: The name of the image object that contains the "src" attribute is passed to the function, just like it was before.
The onMouseOut code is different. Notice that we're passing back "products" instead of "productsSub3". Since we want the image to go back to its default state no matter which submenu it was on, we send back the name of the image we want the rollover to become. This will become clear shortly, when we peer at the JavaScript.
Let's look at the JavaScript. We didn't touch the rollOut function, but we did alter rollOver, as in Example 111.
Example 111 Submenu JavaScript
function rollOver (imgName) { _if ((imgName.indexOf("products") != -1) && (imgName != "products")) { _subMenuName = imgName _imgName = "products" } else { _subMenuName = imgName } _document.images[imgName].src = eval(subMenuName + "On.src") } function rollOut (imgName) { document.images[imgName].src = eval(imgName + "Off.src") }
How the Code Works
We want to distinguish between the submenu images and the main images, and a good way to do that is to examine the name of the imgName. We see if it contains the string "products" but is not actually equal to "products." That means the values "productsSub1", "productsSub2", and "productsSub3" will be recognized.
At this point, we introduce a new variable called "subMenu." We'll be using it later when we do the actual image swap. We set subMenu to the value of imgName, so the correct image gets replaced.
We then set imgName simply to "products." We do this because the only name the image has is "products." This is the name we set in the <img> tag in the HTML.
If the rollover is anything elsei.e., if it is not a products submenuthen subMenu and imgName are the same thing.
Finally, we actually replace the image. We're still using imgName to identify which image is being replaced, but we've moved to subMenu to describe the image that's replacing the old one. This way, "products" gets altered, but its source is flexible enough to allow a number of submenu images.