Mouseover buttons (JavaScript)

[web guru]

Just want some advice - am making some mouse over buttons and I have written some JavaScript code for it. But it is very slow to display the mousover image. Can any one give me some advice on how to speed it up or another way of doing mouse overs.

PS. I have already made the images as small as possible.

 

[Fallout_Multi.]

<img border=0 name="image" src="image1.jpg" onMouseOver="image.src='image2.jpg'" onMouseOut="image.src='image1.jpg'">

In your code, put the above on one line. The first time you try it, the picture needs to load so it might lag for a second. I recommend using a preloader if you have more than a few rollovers. "image" is the name of your picture. image1 is the picture when the page loads, image2 is your picture with the mouse over it, and it goes back to image1 after you take your mouse off. Change the code in bold to your names. Hope this works for you!

 

[web guru]

I already have this done here is my code:

--------------------------

<script language="JavaScript" type="text/javascript">

if (document.images) {
//Preload Image

homeOne = new Image();
homeOne.src = "images/homeOne.gif" ;
homeTwo = new Image() ;
homeTwo.src = "images/homeTwo.gif" ;


}

function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval(buttonname + "Two.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval(buttonname + "One.src" );
}
}

-----------------------

And

-----------------------

<a href="http://www.banaghergaa.com" onMouseOver="buttondown('home')"
onMouseOut="buttonup('home')">

<img src="images/homeOne.gif" name="home" width="72" height="17" border="0"></a>

-----------------------

 

[Fallout_Multi.]

Try this for each image, remember to change the name and the image names:

<a href="http://www.banaghergaa.com" onMouseOver="home.src='images/homeTwo.gif'"
onMouseOut="home.src='images/homeOne.gif'">

<img src="images/homeOne.gif" name="home" width="72" height="17" border="0"></a>

*EDIT* needed the image/ path for the pics

 

[web guru]

ok I have made your suggested change to the code but I am now trying to preload the images using the following code,

---------------------------

function doPreload()
{

var the_images = new Array('images/contactOne.gif','images/contactTwo.gif',
'images/faqTwo.gif', 'images/faqOne.gif', 'images/aboutusOne.gif', 'images/aboutusTwo.gif',
'images/portfolioOne.gif', 'images/portfolioTwo.gif', 'images/productsOne.gif', 'images/productsTwo.gif',
'images/hostingOne.gif', 'images/hostingTwo.gif', 'images/servicesOne.gif', 'images/servicesTwo.gif',
'images/homeOne.gif', 'images/homeTwo.gif');
preloadImages(the_images);
}

function preloadImages(the_images_array) {

for(var loop = 0; loop < the_images_array.length; loop++)

{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}

---------------------------

and I call the preLoad() function in the body tag, but it doesent seem to be preloading the images right as every time I do a mouse over the browser starts to dowload the image. Heres an example of a mouse over button code

---------------------------

<a href="http://www.banaghergaa.com" onMouseOver="home.src='images/homeTwo.gif';" onMouseOut="home.src='images/homeOne.gif';">

<img src="images/homeOne.gif" name="home" width="72" height="17" border="0"></a>

---------------------------


I think it might have sometink to do with the line

an_image.src = the_images_array[loop];

but am not sure