...

View Full Version : disjointed rollover problem



mightypants
08-05-2008, 08:42 PM
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.

ninnypants
08-05-2008, 08:58 PM
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

rangana
08-06-2008, 03:51 AM
Do you have a link mightypants? I've copied the snippet and all are working fine.

mightypants
08-06-2008, 04:04 AM
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.

mightypants
08-06-2008, 04:11 AM
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.

ninnypants
08-06-2008, 04:17 AM
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.

mightypants
08-06-2008, 02:22 PM
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?

ninnypants
08-06-2008, 03:21 PM
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

mightypants
08-06-2008, 03:29 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum