| Basic Script | Buttons Remain Acitve | Fix the Bug | Multiple Image Switchingt | Nested Rollovers |
The rollover script from the previous page works fine, but it could be better. Let's suppose the user is on page two of your site, wouldn't it show a certain amount of class to have the button for that page remain active? If the buttons remained active fore each page of your site, the user would know where he/she is at all times. It would help with the navigation and make your rollover script a step above the thousands of rollovers seen everywhere on the web. In this case, the "Page Two" image should be active by default, and become inactive only when the user is pointing at a different button. You need to inactivate one image and activate another at the same time. To do this you declare a variable for the page and add two short functions.
Here is the script with the additional code.
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.image){ //conditional to check for browser compatibility
var defImg = "img2";
function actMenuItem(imgName) {
img1on = new Image(161,50); //preloading of images
img1on.src = "images/home-on.gif";
img1off = new Image(161,50);
img1off.src = "images/home-off.gif";
img2on = new Image(161,50);
img2on.src = "images/pageone-on.gif";
img2off = new Image(161,50);
img2off.src = "images/pageone-off.gif";
img3on = new Image(161,50);
img3on.src = "images/pagetwo-on.gif";
img3off = new Image(161,50);
img3off.src = "images/pagetwo-off.gif";
img4on = new Image(161,50);
img4on.src = "images/pagethree-on.gif" ;
img4off = new Image(161,50);
img4off.src = "images/pagethree-off.gif";
act(imgName); inact(defImg);
}
function inactMenuItem(imgName) {
inact(imgName); act(defImg);
}
function act(imgName) { //function for "on" images
if (document.images)
}
document[imgName].src = eval(imgName + "on.src");
function inact(imgName) { //function for "off" images
if (document.images)
}
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</SCRIPT>
<!--Here are the calls to functions. -->
<table border=0 cellspacing = "0" Cellpadding ="0">
<tr>
<td><A HREF="nowhere.html" onMouseOver="actMenuItem(¹img1¹)
window.status=¹Put your message in the status bar¹; return true"
onMouseOut="inactMenuItem(¹img1¹);
window.status=¹¹; return true">
<IMG SRC="images/home-off.gif" HEIGHT="50" WIDTH="161"
NAME="img1" BORDER="0" ALT="Home"></A>
<A HREF="nowhere.html"
<IMG SRC="images/pageone-off.gif"
HEIGHT="50"
WIDTH="161"
NAME="img2"
BORDER="0"
ALT=""page two"></A>
<A HREF="nowhere.html" onMouseOver="actMenuItem(¹img3¹)
window.status=¹Tell visitors about your site¹; return true"
onMouseOut="inactMenuItem(¹img3¹)
; window.status=¹¹; return true">
<IMG SRC="images/pagetwo-off.gif"
HEIGHT="50"
WIDTH="161"
NAME="img3"
BORDER="0"
ALT="Page two"></A>
<A HREF="nowhere.html" onMouseOver="actMenuItem(¹img4¹)
window.status=¹Put some information in the status bar¹; return true"
onMouseOut="inactMenuItem(¹img4¹)
; window.status=¹¹; return true">
<IMG SRC="images/pagethree-off.gif"
HEIGHT="50"
WIDTH="161"
NAME="img4"
BORDER="0"
ALT="page three"></A></td>
</tr>
</table>
There are some points of interest with this script. First is the global variable, defImg. This variable needs to be declared for each page. In this example, the button image is referenced by img2. Therefore, the global variable, defImg is given the value of img2. On page two, the value is img3 and so on. The actMenuItem() function accepts a string specifying the name of the selected image. It calls act() to activate that image, and then invokes inact() to inactivate the page's default image. The inactMenuItem() function inactivates the active image, and activates the page's default image. The inactMenuItem() function reverses the operation of actMenuItem().
The calls to function need some changes as well. Notice that the calls are to the actMenuItem() and inactMenuItem() rather than act() and inact(). Also there is no call to function with page one. Further, the default image for page one has been changed from pageone-off.gif to pageone-on.gif
Here is this script in action.
    |
| Basic Script | Buttons Remain Acitve | Fix the Bug | Multiple Image Switchingt | Nested Rollovers |