- Shelley Biotech Example
- Preloading Images
- Mouseovers and Submenus
- Mouseovers and Stylesheets
- Recap
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 pagethat's all we need. Figure 17 shows what this page looks like in Netscape 4.
Figure 17 The page in Netscape 4
As you can see, it's pretty simple. Here's Example 112, which contains the entire code of the first version of the page I did.
Example 112 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 18.
Figure 18 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 113 shows. Change the JavaScript code to the following:
Example 113 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
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.
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.
Next, we see if the browser name is "Netscape" and whether is a 4.x (or lower) version.
If it is, we create a little variable that contains the extra reference that Netscape 4 needs in order to see the navigation images.
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.
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.
The rollOut function is the same as the rollOver.