Advice on Preloading Images.

[Cerebral Believer]

Hi folks,

I am using the following code for mouse over (roll-overs) in my XHTML code.

<a onmouseover="document.getElementById('sitemap').src =
'../images/buttons/sitemap_mo.jpg';"
onmouseout="document.getElementById('sitemap').src =
'../images/buttons/sitemap.jpg';"
href="../sitemap.htm" border="0">
<img id='sitemap' src="../images/buttons/sitemap.jpg" border="0" alt="Site
Map"/></a>

However, I have not preloaded the images, and wonder if someone could help
by suggesting suitable code to preload the images.

Regards,
C.B.

 

[Cerebral Believer]

Hi folks,

I am using the following code for mouse over (roll-overs) in my XHTML
code.

<a onmouseover="document.getElementById('sitemap').src =
'../images/buttons/sitemap_mo.jpg';"
onmouseout="document.getElementById('sitemap').src =
'../images/buttons/sitemap.jpg';"
href="../sitemap.htm" border="0">
<img id='sitemap' src="../images/buttons/sitemap.jpg" border="0" alt="Site
Map"/></a>

However, I have not preloaded the images, and wonder if someone could help
by suggesting suitable code to preload the images.

Regards,
C.B.

I was thinking of using this code in the head section

<script Language="JavaScript" typr="text/javascript">

image1 = new Image();
image1.src = "images/buttons/home.jpg";
image2 = new Image();
image2.src = "images/buttons/home_mo.jpg";
image3 = new Image();
image3.src = "images/buttons/blog.jpg";
image4 = new Image();
image4.src = "images/buttons/blog_mo.jpg";
image5 = new Image();
image5.src = "images/buttons/reviews.jpg";
image6 = new Image();
image6.src = "images/buttons/reviews_mo.jpg";

image7 = new Image(); image7.src = "images/buttons/music.jpg"; image8 = new
Image(); image8.src = "images/buttons/nusic_mo.jpg"; image9 = new Image();
image9.src = "images/buttons/links.jpg"; image10 = new Image(); image10.src
= "images/buttons/links_mo.jpg"; image11 = new Image(); image11.src =
"images/buttons/contact.jpg"; image12 = new Image(); image12.src =
"images/buttons/contact_mo.jpg"; image13 = new Image(); image13.src =
"images/buttons/sitemap.jpg"; image14 = new Image(); image14.src =
"images/buttons/sitemap_mo.jpg";

</script>

Would this be suitable code to preload the images for more efficient loading
for my HTML code originally posted?

I wonder if the JavaScript preload statements must all be on a new line, or
if they can just be one one line separated by ";".

Regards,
C.B.