robertpalmer
05-05-2003, 02:11 AM
Hi,
I'm new to javascript and have heard that preloading images will make image rollovers change instantly. Will the script that I am using below preload my images into browser cache prior to displaying them?
<head>
<script language="JavaScript">
<!--
if (document.images) {
image1on = new Image();
image1on.src = "images/home.gif";
image2on = new Image();
image2on.src = "images/about.gif";
image3on = new Image();
image3on.src = "images/register.gif";
image1off = new Image();
image1off.src = "images/home1.gif";
image2off = new Image();
image2off.src = "images/about1.gif";
image3off = new Image();
image3off.src = "images/register1.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}
// -->
</script>
</head>
<body>
<table width=82 border=0 cellpadding=0 cellspacing=0>
<tr><td width=82><a href="index.htm" onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')"><img name="image1" src="images/home.gif" alt="" width=82 height=71 border=0></a></td></tr>
<tr><td width=82><a href="aboutus.htm" onMouseOver="changeImages('image2', 'image2on')" onMouseOut="changeImages('image2', 'image2off')"><img name="image2" src="images/about.gif" alt="" width=81 height=66 border=0></a></td></tr>
<tr><td width=82><a href="register.htm" onMouseOver="changeImages('image3', 'image3on')" onMouseOut="changeImages('image3', 'image3off')"><img name="image3" src="images/register.gif" alt="" width=82 height=71 border=0></a></td></tr>
</body>
Thanks in advance,
Rob
I'm new to javascript and have heard that preloading images will make image rollovers change instantly. Will the script that I am using below preload my images into browser cache prior to displaying them?
<head>
<script language="JavaScript">
<!--
if (document.images) {
image1on = new Image();
image1on.src = "images/home.gif";
image2on = new Image();
image2on.src = "images/about.gif";
image3on = new Image();
image3on.src = "images/register.gif";
image1off = new Image();
image1off.src = "images/home1.gif";
image2off = new Image();
image2off.src = "images/about1.gif";
image3off = new Image();
image3off.src = "images/register1.gif";
}
function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
}
}
}
// -->
</script>
</head>
<body>
<table width=82 border=0 cellpadding=0 cellspacing=0>
<tr><td width=82><a href="index.htm" onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')"><img name="image1" src="images/home.gif" alt="" width=82 height=71 border=0></a></td></tr>
<tr><td width=82><a href="aboutus.htm" onMouseOver="changeImages('image2', 'image2on')" onMouseOut="changeImages('image2', 'image2off')"><img name="image2" src="images/about.gif" alt="" width=81 height=66 border=0></a></td></tr>
<tr><td width=82><a href="register.htm" onMouseOver="changeImages('image3', 'image3on')" onMouseOut="changeImages('image3', 'image3off')"><img name="image3" src="images/register.gif" alt="" width=82 height=71 border=0></a></td></tr>
</body>
Thanks in advance,
Rob