Home > Articles > Web Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

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 1–5.

Figure 1-5Figure 1–5 Product submenu

This menu is really one big rollover with five (yes, five) different states. These states are:

  1. No rollover
  2. Rollover "Products"
  3. Roll over "BioHomeLab 2.0"
  4. Roll over "Focusyn"
  5. Roll over "Sinoplug"

Figure 1–6 shows all of these images.

Figure 1-6Figure 1–6 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 1–9.

Example 1–9 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 1–10.

Example 1–10 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.

  1. Notice that the name of the image is still "products." That will become important later, when we look at the JavaScript.

  2. 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.

  3. 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 1–11.

Example 1–11 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

  1. 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.

  2. 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.

  3. 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.

  4. If the rollover is anything else—i.e., if it is not a products submenu—then subMenu and imgName are the same thing.

  5. 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.

  • + Share This
  • 🔖 Save To Your Account