JavaScript Frequently Asked Questions - Page 2 - HTML Forums

agent002 · 06-25-2004, 04:48 AM

Here is a simple code snippet for doing that:

Code:

<img src="off.gif" alt="Alternate text" border="0"
onmouseover="this.src='on.gif';" onmouseout="this.src='off.gif';">

If you want to do many image rollovers on a page, you may want to use a function that doesn't require you to specify the onmouseout image src. Add this to the page header:

Code:

<script type="text/javascript">
//<![CDATA[
var restore = new Array();
function imgOver(whichImage, newSrc){
    restore[whichImage] = whichImage.src;
    whichImage.src = newSrc;
}

function imgOut(whichImage){
    whichImage.src = restore[whichImage];
}
//]]>
</script>

You can then use this code for the rollovers:

Code:

<img src="off.gif" alt="Alternate text" border="0"
onmouseover="imgOver(this, 'on.gif');" onmouseout="imgOut(this);">

agent002 · 06-27-2004, 10:27 AM

You only need to copy this code snippet to the page header:

Code:

<script type="text/javascript">
//<![CDATA[
// Specify images to preload here:
var preload = new Array('image1.gif', 'image2.gif', 'image3.gif');

var loader = new Array();
for(var i = 0; i < preload.length; i++){
    loader[i] = new Image();
    loader[i].src = preload[i];
}
//]]>
</script>

and specify the images to preload in the "preload" array.

Jon Hanlon · 11-28-2004, 10:28 PM

n8thegreat has written some neat scripts to enhance your scrolling experience.
They can be found at n-son.com/scripts/jsScrolling/