| Basic Script | Buttons Remain Acitve | Fix the Bug | Multiple Image Switchingt | Nested Rollovers |
With a small addition to your rollover script you can switch more than one image at a time. This is effective if you want to tell a user what information they will find by clicking a link. The rollover for the Power Verbs uses this technique. You can put the second image-switch anywhere on your page, and with some extra code, you can even have the images switch across frames.
Of course the first step is to create the images. The following example uses a white image as the default, and four images with straight text.
 White default image |
 text image no.1 |
 Text image no.2 |
 Text image no.3 |
 Text image no.4 |
The desired effect is to have the text appear when the cursor is moved over a button.
Here is the script at work:
| |
    |
var img1off = new Image(); //preloading of images
img1off.src = "images/home-off.gif";
var img1on = new Image();
img1on.src = "images/home-on.gif";
var img2off = new Image();
img2off.src = "images/pageone-off.gif";
var img2on = new Image();
img2on.src = "images/pageone-on.gif";
var img3off = new Image();
img3off.src = "images/pagetwo-off.gif";
var img3on = new Image();
img3on.src = "images/pagetwo-on.gif";
var img4off = new Image();
img4off.src = "images/pagethree-off.gif";
var img4on = new Image();
img4on.src = "images/pagethree-on.gif";
img1ad = new Image();
img1ad.src = "images/most.gif"; // Secondary Images
img2ad = new Image();
img2ad.src = "images/feedback.gif";
img3ad = new Image();
img3ad.src = "images/powerverbs.gif";
img4ad = new Image();
img4ad.src = "images/scripts.gif";
}
if (document.images)
document[imgName].src = eval(imgName + "on.src");
document["holder4"].src = eval(imgName + "ad.src"); // Added image
if (document.images)
document[imgName].src = eval(imgName + "off.src");
document["holder4"].src = "images/ad-white.gif"; //Place holder image
}
// -->
</SCRIPT>
<TABLE border="0" cellspacing="0" padding="0">
<TR>
<TD >
<IMG
src="images/ad-white.gif" name="holder4"
width="173" height="58" border= "0">
</TD>
</TR>
<TR>
<TD><A href="nowhere.html"
onMouseOut="inact(¹img1¹);
window.status
=¹¹;
return true"
onMouseOver="act(¹img1¹)
window.status='¹Put your message in the status bar¹; return true">
<IMG alt="Home" border="0" height="50" name="img1"
src="images/home-off.gif" width="161"><BR>
</A><A href="nowhere.html"
onMouseOut="inact(¹img2¹)
;
window.status
=¹¹;
return true"
onMouseOver="act(¹img2¹)
window.status=¹Customize you status bar¹; return true">
<IMG alt="page
two" border="0" height="50" name="img2"
src="images/pageone-off.gif" width="161"></A><BR>
;<A href="nowhere.html"
onMouseOut="inact(¹img3¹)
;
window.status
=¹¹;
return true"
onMouseOver="act(¹img3¹)
window.status=¹Tell visitors about your site¹; return true">
<IMG alt="Page
two" border="0" height="50" name="img3"
src="images/pagetwo-off.gif" width="161"></A><BR>
<A href="nowhere.html"
onMouseOut="inact(¹img4¹);
>
window.status
=¹¹;
return true"
onMouseOver="act(¹img4¹)
window.status=¹Put some information in the status bar¹; return true">
<IMG alt="page
two" border="0" height="50" name="img4"
src="images/pagethree-off.gif" width="161"></A>
</TD>
</TR>
</TABLE>
The added code is bold. The first step is to preload the new images. Notice that "ad" is added to the variable name, img1ad.src = "images/most.gif";. This is referenced in the functions, document["holder4"].src = eval(imgName + "ad.src");. This simply defines the new images for the functions. The other point to note about this new line is ["holder4"]. This is the name of the reference of the image switch. Where this name appears in your HTML code, the new image switch takes place.
The same is true with the function inact(imgName) function. The difference in the statement, document["holder4"].src = "images/ad-white.gif"; is the src does not refer to an array. Instead it refers to a particular image, the default white image in this case. What that means is that the white image is the default for all the other text images.
Note the line, <src="images/ad-white.gif" IMG alt="White Default" border="0" height="58" width="173" NAME="holder4">. The name, "holder4" acts as a place holder telling the functions where the image switch is to occur. There is no event handler here because the event handlers are with the buttons. You want the text images to switch when the cursor is moved over the buttons. Also, which text image is displayed is determined by the button event handlers.
| Basic Script | Buttons Remain Acitve | Fix the Bug | Multiple Image Switchingt | Nested Rollovers |