Home > Articles > Web Development > Ajax and JavaScript

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

Mouseovers and Stylesheets

This section assumes you either know something about stylesheets or can learn about them incredibly fast. Put your thinking helmet on.

Many people are starting to build their Web pages using stylesheets and to position elements by placing them in layers. Generally, this is a great way to build a Web site, and it's decreased the amount of time it takes me to build one. Unfortunately, it can throw a wrench into any mouseovers you have.

As an example, let's look at a small project I did recently (actually, yesterday). I've removed the name of the company and altered the text so you don't know for whom I did it (they're a little secretive). We'll only look at a single page—that's all we need. Figure 1–7 shows what this page looks like in Netscape 4.

Figure 1-7Figure 1–7 The page in Netscape 4

As you can see, it's pretty simple. Here's Example 1–12, which contains the entire code of the first version of the page I did.

Example 1–12 All the code

<html>
<head>
    <title>Mouseovers and Stylesheets</title>
    <style type="text/css">
#blueHead {position: absolute; top: 0; left: 0; }
#content { position: absolute; top:120; left: 25; width: 320;}
#contentHome { position: absolute; top:160; left: 25; width:
320;}
#contentHomeHd { position: absolute; top:120; left: 25; }

#nav {position: absolute; top: 40; left: 20; }

.hd1 {
    font-family: arial, sans-serif;
    font-size: 28px;
    font-weight: normal;
    font-style: normal;
    color: #005278;
}

.hd2 {
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    color: #005278;
}

.copy {
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    color: #005278;
}

</style>


<script language="JavaScript">
// preload images

agendaOn = new Image()
agendaOn.src = "images/nav_agenda_on.gif"

agendaOff = new Image()
agendaOff.src = "images/nav_agenda_off.gif"

locationOn = new Image()
locationOn.src = "images/nav_location_on.gif"

locationOff = new Image()
locationOff.src = "images/nav_location_off.gif"

travelOn = new Image()
travelOn.src = "images/nav_travel_on.gif"

travelOff = new Image()
travelOff.src = "images/nav_travel_off.gif"

contactOn = new Image()
contactOn.src = "images/nav_contact_on.gif"

contactOff = new Image()
contactOff.src = "images/nav_contact_off.gif"

regOn = new Image()
regOn.src = "images/nav_reg_on.gif"

regOff = new Image()
regOff.src = "images/nav_reg_off.gif"

activeOn = new Image()
activeOn.src = "images/nav_active_on.gif"

activeOff = new Image()
activeOff.src = "images/nav_active_off.gif"

function rollOver (imgName)
{
    document.images[imgName].src = eval(imgName +
"On.src")
}

function rollOut (imgName)
{
    document.images[imgName].src = eval(imgName +
      "Off.src")
}

</script>
</head>

<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0"
marginheight="0" marginwidth="0">

<div id="blueHead">
<table cellpadding="0" cellspacing="0" border="0"
    width="100%" bgcolor="#005278">
    <tr><td><img src="images/clear_dot.gif" width="800"
      height="80"></td></tr>
</table>
</div>


<div id="contentHomeHd" class="hd1">Offsite
    Meeting</div>

<div id="contentHome" class="copy">
    <span class="hd2">
    Four Seasons Resort Maui, HI
    <br>
    March 13 - 15, 2003
    <br><br><br>
    Welcome
    </span>
    <br><br>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.

</div>

<div id="nav">
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td><a href="agenda.html"
      onMouseOver="rollOver('agenda')"
      onMouseOut="rollOut('agenda')"><img
      src="images/nav_agenda_off.gif" name="agenda"
      width="68" height="39" border="0"></a></td>
      <td><a href="location.html"
      onMouseOver="rollOver('location')"
      onMouseOut="rollOut('location')"><img
      src="images/nav_location_off.gif"
      name="location" width="78" height="39"
      border="0"></a></td>
      <td><a href="travel.html"
      onMouseOver="rollOver('travel')"
      onMouseOut="rollOut('travel')"><img
      src="images/nav_travel_off.gif" name="travel"
      width="60" height="39" border="0"></a></td>
      <td><a href="contact.html"
      onMouseOver="rollOver('contact')"
      onMouseOut="rollOut('contact')"><img
      src="images/nav_contact_off.gif"
      name="contact" width="75" height="39"
      border="0"></a></td>
      <td><a href="reg.html"
      onMouseOver="rollOver('reg')"
      onMouseOut="rollOut('reg')"><img
      src="images/nav_reg_off.gif" name="reg"
      width="97" height="39" border="0"></a></td>
      <td><a href="active.html"
      onMouseOver="rollOver('active')"
      onMouseOut="rollOut('active')"><img
      src="images/nav_active_off.gif" name="active"
      width="75" height="39" border="0"></a></td>
    </tr>
</table>
</div>

</body>
</html>

How the Code Works

Unless you're new to stylesheets, there isn't anything here you haven't seen before. We have a few layers, a few classes, and a table containing the navigation images at the top of the page.

In the JavaScript, we preload all the navigation images, just like we've done before, and use the simple rollOver and rollOut functions we looked at in the last section. However, there's only one problem: The rollovers don't work in Netscape 4.x. Everything is placed correctly and all of the links work, but when you roll over the images, nothing happens.

We can assume that Netscape has encountered some kind of error and has refused to swap out the images. Since this is Netscape, we can type "javascript:" in the location box (that is, where you always put the URLs), and a window will pop up, telling us all of our grievous JavaScript errors, as in Figure 1–8.

Figure 1-8Figure 1–8 JavaScript errors

The problem, according to Netscape, is that "document.images[imgName]" doesn't exist. Well, we know for sure that it does. Internet Explorer (IE) can see the image. Even Netscape 6 can see the image. Only poor Netscape 4 is confused.

Netscape 4 is confused because it doesn't see the world like other browsers do. When you use layers, Netscape 4 needs special treatment. In this case, we need to tell Netscape 4 which layer the images are in. Otherwise, it won't see a thing. So it sounds like the following would work:

document.nav.images[imgName] 

No such luck. Netscape 4 sees a layer, like the "nav" layer that contains the navigation images, and it sees that layer as a whole new document object. This means that the code has to look like this:

document.nav.document.images[imgName] 

Seems kinda silly, doesn't it? Well, silly or not, that's what we have to do. Fortunately, this is a pretty simple fix, as Example 1–13 shows. Change the JavaScript code to the following:

Example 1–13 Netscape 4, layers, and mouseovers

// browser detect
_browser = navigator.appName
_browserNum = parseInt(navigator.appVersion)

_if ((browser == "Netscape") && (browserNum < 5))
{
    // Netscape 4.x
    _layerRef = "nav.document."
}
else
{
    _layerRef = ""
}


function rollOver (imgName)
{
    _eval("document." + layerRef +
    "images[imgName].src = " + imgName + "On.src")
}

function rollOut (imgName)
{
    _eval("document." + layerRef +
    "images[imgName].src = " + imgName + "Off.src")
}

How the Code Works

  1. We need to find out if the user is one of the nine remaining people in the world using Netscape 4, and we start by getting the name of the browser being used. As it happens the "navigator" object contains information about the browser being used. So we look at navigator.appName to discover the name of the browser.

  2. We then move on to figuring out which version is being used, by pulling the integer out of the appVersion. Using parseInt to pull out the integer isn't necessary, but the integer is all we care about.

  3. Next, we see if the browser name is "Netscape" and whether is a 4.x (or lower) version.

  4. If it is, we create a little variable that contains the extra reference that Netscape 4 needs in order to see the navigation images.

  5. If the user has a browser released in this century, then the variable layerRef is empty, since the more modern browsers don't need the extra help.

  6. We then place the layerRef variable into the JavaScript, so that if Netscape 4 is being used, then nav.document. becomes part of the code. If Netscape 4 is not being used, then layerRef is blank, and the code is the same as it was in the previous section.

  7. The rollOut function is the same as the rollOver.

  • + Share This
  • 🔖 Save To Your Account