...

View Full Version : image rollover help for a newb



jumbojs
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.

thanks



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

Arbitrator
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.

rhinodog8
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

Example:

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum