Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts

    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:

    Code:
    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:

    Code:
    <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>
    ....

    Code:
    <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.

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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
    Code:
    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

  • Users who have thanked ninnypants for this post:

    mightypants (08-06-2008)

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Do you have a link mightypants? I've copied the snippet and all are working fine.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ninnypants View Post
    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
    Code:
    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...?

    Code:
    <img src="images/tab_0700.gif" name="jsbutton" id="tab_0700" onmouseover="tabover('coverImage1')" onmouseout="tabout()"/>
    Thanks for your help.

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Quote Originally Posted by mightypants View Post
    If I set it up like that, then would this be the appropriate way to call the function from one of the tabs...?

    Code:
    <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
    Code:
    <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.

  • #7
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    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?

  • #8
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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

  • #9
    Regular Coder
    Join Date
    Jun 2008
    Posts
    113
    Thanks
    27
    Thanked 0 Times in 0 Posts
    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:

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

    Code:
    <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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •