disjointed rollover problem

I have several different tabs that, when hovered over, need to change the image in a particular location. I've written a script for it, but it currently isn't working.

Here's the script:

function preloader()
{
coverImage1 = new Image();
coverImage1.src = "images/cover60676.jpg";
coverImage2 = new Image();
coverImage2.src = "images/cover60678.jpg";
coverImage3 = new Image();
coverImage3.src = "images/cover60677.jpg";
coverImage4 = new Image();
coverImage4.src = "images/cover60675.jpg";
coverImage5 = new Image();
coverImage5.src = "images/cover60674.jpg";
}



function tab1over(){
document.getElementById("bookCovers").src = "images/cover60676.jpg";
}


function tab2over(){
document.getElementById("bookCovers").src = "images/cover60678.jpg";
}


function tab3over(){
document.getElementById("bookCovers").src = "images/cover60677.jpg";
}

function tab4over(){
document.getElementById("bookCovers").src = "images/cover60675.jpg";
}

function tab5over(){
document.getElementById("bookCovers").src = "images/cover60674.jpg";
}

function tabout(){
document.getElementById("bookCovers").src = "images/covers.gif";
}

and the relavent HTML:

<div id="tabs">
<a href="index.html"><img src="images/tab_0700.gif" name="jsbutton" id="tab_0700" onmouseover="tab1over()" onmouseout="tabout()"/></a>
<a href="DSPM_800.html">
<img src="images/tab_0800.gif" name="jsbutton" id="tab_0800" onmouseover="tab2over()" onmouseout="tabout()" /></a>
<a href="DSPM_850.html">
<img src="images/tab_0850.gif" name="jsbutton" id="tab_0850" onmouseover="tab2over()" onmouseout="tabout()"/></a>
<a href="DSPM_1110.html">
<img src="images/tab_1110.gif" name="jsbutton" id="tab_1110" onmouseover="tab3over()" onmouseout="tabout()"/></a>
<a href="DSPM_1510.html">
<img src="images/tab_1510.gif" name="jsbutton" id="tab_1510" onmouseover="tab4over()" onmouseout="tabout()"/></a>
<a href="DSPM_1610.html">
</a><img src="images/tab_1610.gif" name="jsbutton" id="tab_1610" onmouseover="tab5over()" onmouseout="tabout()"/>
</div>

....

<img src="images/covers.gif" height="300" width="227" id="bookCovers" />


The script is linked properly in the heading of the page. I'm not sure why it isn't working. Anyone know what's wrong? Thanks.

Check to make sure your path to your image is correct, but other than that I don't see any problems. Though you could also try this

function tabOver(img_var){
document.getElementById('bookCovers').setAttribute('src',img_var);
}

Use your variables from your preloader function to take the place of img_var. That way you only have one function to worry about, and you can also use it for your tabout function

Do you have a link mightypants? I've copied the snippet and all are working fine.

I'm afraid not, I won't be able to get this one up for a while.

Well, I'm glad at least that I'm not missing anything really obvious.

Thanks.

Check to make sure your path to your image is correct, but other than that I don't see any problems. Though you could also try this

function tabOver(img_var){
document.getElementById('bookCovers').setAttribute('src',img_var);
}

Use your variables from your preloader function to take the place of img_var. That way you only have one function to worry about, and you can also use it for your tabout function

If I set it up like that, then would this be the appropriate way to call the function from one of the tabs...?

<img src="images/tab_0700.gif" name="jsbutton" id="tab_0700" onmouseover="tabover('coverImage1')" onmouseout="tabout()"/>

Thanks for your help.

If I set it up like that, then would this be the appropriate way to call the function from one of the tabs...?

<img src="images/tab_0700.gif" name="jsbutton" id="tab_0700" onmouseover="tabover('coverImage1')" onmouseout="tabout()"/>

Thanks for your help.
Yes, but you would only need the tab over function if you preloaded the default image
<img src="images/tab_0700.gif" name="jsbutton" id="tab_0700" onmouseover="tabover(coverImage1)" onmouseout="tabover(default)"/>
Also if you are passing variables into your functions don't use quotes because it will pass the text value instead of the variable and cause an error.

Can you have more than one function triggered by onmouseover on the same element? It just occurred to me that I have another script running a rollover on those tabs as well. Could that be the problem?

It might be but I've used multiple functions with an onclick event handler, so I don't see why onmouseover would be to different

So I found the problem. It turns out there was a problem with the link to the javascript file. I did have some trouble with the setAttribute method as you showed me, but ended up having it set up like this:

function tabOver(imgSrc){
document.getElementById('bookCovers').src = imgSrc ;
}

...

<a href="DSPM_700.html" onmouseover="tabOver('images/cover60676.jpg')" onmouseout="tabOut()">
<img src="images/tab_0700.gif" name="jsbutton" id="tab_0700"/></a>

This works well. Thanks for the help.