View Full Version : image rollover help for a newb

08-17-2008, 07:56 PM
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.


//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;}

08-18-2008, 06:23 AM
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.

08-18-2008, 06:49 AM
I'm not exaclty sure either on what you are trying to do but have you looked into using css the :hover spec


<style type="text/css">
#nav1 {background-color:#000}
#nav1:hover {background-color:#999}
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.