| Basic Script | Buttons Remain Acitve | Fix the Bug | Multiple Image Switchingt | Nested Rollovers |
This is the last installment of the JavaScript rollover. You can copy and paste any of these scripts to make your web page more dynamic and interesting for the user. If you do not have JavaScript experience, you can still make these scripts work with a little effort. Just copy/paste and plug in your own graphics
You can layer rollovers to create nested rollovers. A nested rollover is an image that, when the cursor rolls over it, splits into several images which are also rollovers. You can have the image split into as many nested rollovers as you desire. It sounds complicated, but it's really not too difficult.
Lets take a look at the six images used for this example
 |
 |
 |
 |
 |
 |
Combining these images makes for a very interesting rollover, one not often seen on the web.
Here is the code
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var logot = new Image();
}
logot.src = "images/site-top.gif";
var logob = new Image();
logob.src = "images/site-bottom.gif";
var logotn = new Image();
logotn.src = "images/soreeyes-off.gif";
var logobn = new Image();
logobn.src = "images/glasses-off.gif";
var logota = new Image();
logota.src = "images/soreeyes-on.gif";
var logoba = new Image();
logoba.src = "images/glasses-on.gif";
var isMapAct = false;
function actLogo(c1, c2) {
isMapAct = true;
}
if (document.images) {
act("logo" + c1);
inact("logo" + c2);
}
function inactLogo() {
isMapAct = false;
}
if (document.images) {
var str = ¹if (!isMapAct) {¹ +
¹document.logot.src = logot.src;¹ +
¹document.logob.src = logob.src; }¹;
timerID = setTimeout(str, 1);
}
function act(imgName) {
if (document.images)
}
document[imgName].src = eval(imgName + ¹a.src¹);
function inact(imgName) {
if (document.images)
}
document[imgName].src = eval(imgName + ¹n.src¹);
// -->
</SCRIPT>
<A HREF="nowhere.html"
onMouseOver="actLogo(¹t¹, ¹b¹)" onMouseOut="inactLogo()">
<IMG SRC="images/site-top.gif" HEIGHT="40" WIDTH="150"
BORDER="0" NAME="logot" ALT="Sight for Sore Eyes (top)"></A><BR>
<A HREF="nowhere.html"
onMouseOver="actLogo(¹b¹, ¹t¹)" onMouseOut="inactLogo()">
<IMG SRC="images/site-bottom.gif" HEIGHT="40" WIDTH="150"
BORDER="0" NAME="logob" ALT="Sight for Sore Eyes (bottom)"></A>
The actLogo() function accepts two string arguments. One argument is 't' (for "top") and the other is 'b' (for "bottom"). This function makes the logo active (it becomes a two-item menu) by making the top (or bottom) active and the bottom (or top) inactive. The first argument specifies which image becomes active, and the second specifies which image becomes inactive.
The inactLogo() function displays the original images. The isMapAct variable and the setTimeout() function are implemented to stop the logo from appearing when the user moves the pointer from the top to the bottom, or from the bottom to the top.
| Basic Script | Buttons Remain Acitve | Fix the Bug | Multiple Image Switchingt | Nested Rollovers |