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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image rollover help for a newb

    Ok, I am trying to do this in javascript. Let me try to tell you what I want to do. I have a nav with 5 buttons(images). I want to be able to hover over a nav button, say nav1, have that change to newNav1 (a color version of the same image) while having another image underneath, img3(which right now is plain), change to img4(becomes a heading), then when you click on img4, you get img5(a description). Then when you move your mouse away from img5, you go back to the beginning. The code that I have included works except it doesn't go back to the beginning when you move your mouse away from img5. It will go back as long as you only hover over one button but if you hover over say nav1 and then move over to nav2, instead of getting the orginal image, you'll get the images that resulted from hovering over nav1.

    thanks

    Code:
    //img is the first original red img and rolloverURL is the first color image that
    //I want to change to
    //over heading is the image I want the underneath img to change to first
    //and overContent is the img I want the underneath img to change to last.
    function addRollover(img, rolloverURL, overHeading, overContent) 
    {
            var id = img;
            var contentBase = document.content.src;
            
     
            img = document.images[id];
            
            var baseUrl = img.src;
            
            (new Image()).src = rolloverURL;
            (new Image()).src = overHeading;
            (new Image()).src = overContent;
            
    img.src = rolloverURL;
    document.content.src = overHeading;
    document.content.onclick = function () { document.content.src = overContent;}
    img.onmouseout = function() { img.src = baseUrl; }
    document.content.onmouseout = function () { document.content.src = contentBase;}
    }
    Last edited by jumbojs; 08-18-2008 at 12:17 AM.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by jumbojs View Post
    Let me try to tell you what I want to do.
    Would you mind posting a complete document that uses that script? I still can’t figure out what, exactly, you’re trying to do from the given description.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    I'm not exaclty sure either on what you are trying to do but have you looked into using css the :hover spec

    Example:
    Code:
    <style type="text/css">
    #nav1 {background-color:#000}
    #nav1:hover {background-color:#999}
    </style>
    color can be replaced with image following a url link.
    and then minimum javascript to make one div layer appear or change css specs on onmouseover, to change whatever you were talking about changing to a header.


  •  

    Posting Permissions

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