View Full Version : Javascript rollover is a rollover

01-27-2009, 03:28 AM
I already started this in javascript so I don't want to use jquery but can some javascript expert look at my code and tell me what I'm doing wrong and or right? Let me tell you what I am trying to accomplish here. I have a menu that consists of four buttons and when you hover over them, they change color and then underneath a heading image is displayed when you hover over the heading, the button should go back to its original color, and then underneath the heading appears another image that contains some text. For the most part the code works ok except in Firefox sometimes the headings shift around and I am assuming that this is because when visible the text image doesn't exist, so the heading falls to where the text would be, I don't have this problem in IE. The biggest problem is the onmouseout. I don't want the original button to go back to the color right away because I need time to be able to roll over the heading to show the text, so I was trying to use a setTimeout function to pause for a few seconds but it didn't work.

Here's the code:

window.onload = rollover;

function rollover()
var images = document.getElementsByTagName("img"); // Get all the images in the document
var roll = new RegExp("roll");
var preload = [];
var fileLoc = "images/rollovers/";
for ( var i=0; i<images.length; i++)
if (images[i].id.match(roll)) // Loop through all the images in document and look for match on 'roll'
preload[i] = new Image();
preload[i].src = fileLoc + images[i].id + "_over.gif"; // Preload the _overs into an array.
images[i].onmouseover = function() // Add a mouseover event to image
this.src = fileLoc + this.id + "_over.gif"; // When rolled over, this file now equals the _over image
var currentButton = this.id; // Grab the id of the current image
var imageHeader = document.getElementById("current_title"); //Grab all images that are titled 'current_title'
var newHeaderImage = new Image();
newHeaderImage.src = fileLoc + currentButton + "_header.gif"; // Create new image and store _Header image inside
newHeaderImage.id = currentButton + "_header"; //New id for new image is file + headerId
imageHeader.src = newHeaderImage.src;
imageHeader.height = newHeaderImage.height; // Assign header image id to currect location
imageHeader.width = newHeaderImage.width;
imageHeader.style.visibility = "visible";
imageHeader.onmouseover = function() // Attach mouse event for header image
var imageText = document.getElementById("button_text");
var newTextImage = new Image();
newTextImage.src = fileLoc + currentButton + "_text.gif";
imageText.src = newTextImage.src;
imageText.height = newTextImage.height;
imageText.width = newTextImage.width;
imageText.style.visibility = "visible";


//images[i].onmouseout = setTimeout(mouseOut(fileLoc, this.id),3000);

/*function mouseOut(fileLoc, curButton)
var titleImg = document.getElementById("current_title");
var imgButton = curButton;
this.src = fileLoc + imgButton + "_org.gif";

titleImg.style.visibility = "hidden";