Free JavaScript Mouseover Script

[trouble706]

Ok, I see I have been moved up a level to Aspirant so I guess I will be nice and give away something free.....
Here is a nice little mouseover script in JavaScript.
Start with this code in the head of your page
<script language="javascript">
/*** Use the name of your directory where your images are ie.. images, Images, img, what ever you have named your image directory***/
var buttonFolder = "images/";

/*** List your images here that will be on the page and then the mouse over images in the 2nd array ***/
upSources = new Array("myimage.jpg","myimage1.jpg","pic1.jpg","etc.jpg");

overSources = new Array("myimagedown.jpg","myimage1down.jpg","pic1down.jpg","etc.jpg");


//*** DO NOT CHANGE ANYTHING BELOW THIS LINE ***//
totalButtons = upSources.length;



//*** MAIN IMAGES FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources[x];
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources[x];
}
}

// SET MOUSEOVER IMAGE
function setOverImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT IMAGE
function setOutImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}


//preload();
</script>


ok, now use this code in your body element where ever you have the image...

<a href="mypage.html" onMouseOver="setOverImg('1','');" onMouseOut="setOutImg('1','');" target=""><img src="images/myimage.jpg" border="0" id="button1" vspace="1" hspace="1"></a>


<a href="myotherpage.html" onMouseOver="setOverImg('2','');" onMouseOut="setOutImg('2','');" target=""><img src="images/myimage1.jpg" border="0" id="button2" vspace="1" hspace="1"></a>


<a href="nopage.html" onMouseOver="setOverImg('3','');" onMouseOut="setOutImg('3','');" target=""><img src="images/pic1.jpg" border="0" id="button3" vspace="1" hspace="1"></a>

<a href="somepage.html" onMouseOver="setOverImg('4','');" onMouseOut="setOutImg('4','');" target=""><img src="images/etc.jpg" border="0" id="button4" vspace="1" hspace="1"></a>


Be sure that you change the name of the images to your images. If you want to add more images, simply add the names of the images to both arrays and then add the portion of code at the bottom that calls the functions for each image you add.
Let me know how you like this script.

[reekdog]

Thanks for this code! It works perfectly :D

[Clueful]

// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
for ( x=0; x<totalButtons; x++ ) {
buttonUp = new Image();
buttonUp.src = buttonFolder + upSources[x];
buttonOver = new Image();
buttonOver.src = buttonFolder + overSources[x];
}
}
This function does not pre-load properly since it reuses the same object for multiple images. Only the last pair will actually pre-load.

[trouble706]

This function does not pre-load properly since it reuses the same object for multiple images. Only the last pair will actually pre-load.

Clueful, I am not sure that I follow you on that. With the For Loop, I am setting x at 0 and then incrementing through the entire array. I may be missing something on it, but I don't think so. I do welcome your comments. If there is something that I could be doing more efficiently in the script, I would like to know it..

[Clueful]

Clueful, I am not sure that I follow you on that. With the For Loop, I am setting x at 0 and then incrementing through the entire array. I may be missing something on it, but I don't think so. I do welcome your comments. If there is something that I could be doing more efficiently in the script, I would like to know it..
On each iteration after the first, the previously-created object is overwritten before it can download anything; only the last object created survives.
You need to create an array and store a different image object in each element.

[trouble706]

:o:o:oHow did I miss that:o:o:o