javascript title
Basic Script Buttons Remain Acitve Fix the Bug Multiple Image Switchingt Nested Rollovers

Everything you have ever wanted to know about Rollover Scripts

Multiple Image Switching

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
White default image
most image
text image no.1
Text image no.2
Power Verbs text
Text image no.3
  Scripts text image
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:

page two
Page two
page two

This is the code:

if (document.images) {    //conditional statement for support of document.images
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";

function act(imgName) {
if (document.images)
  document[imgName].src = eval(imgName + "on.src");
  document["holder4"].src = eval(imgName + "ad.src"); // Added image


function inact(imgName) {
if (document.images)
  document[imgName].src = eval(imgName + "off.src");
  document["holder4"].src = "images/ad-white.gif";    //Place holder image


// -->
<TABLE border="0" cellspacing="0" padding="0">
<TD > <IMG src="images/ad-white.gif"  name="holder4"  width="173" height="58" border= "0">
<TD><A href="nowhere.html"
onMouseOut="inact(¹img1¹); window.status =¹¹; return true"
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"
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"
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"
> window.status =¹¹; return true"
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>

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

Close this window to return to the Power Verbs web site

Produced by Power Verbs