Preloading Images How do I do it?

[enterthematrix 0]

I've discovered this "onmouseover" command and now I'm rather attached to it. But i've incountered a major problem with this command: The images under the mouse don't load until the cursor is over the button. How do I preload the images so that loading time is not there and the image flashes like it's supposed to?

[OpaQue 15]

I had a similar problem. Preloading is done by using Javascript.

I found this code which will explain you the things better if you know javascript

<script type="text/javascript">    <!--        if (document.images)        {            image1 = new Image(100, 100);            image1.src = "myimage1.gif";            image2 = new Image(468, 60);            image2.src = "myimage2.gif";            image3 = new Image(50, 20);            image3.src = "myimage3.gif";        }    //--></script>

The above code preloads three images.. However, care should be taken that the above code is put in the HEAD tag.

[enterthematrix 0]

Could you explain the elements of this script to me? Where should I change things? Do the numbers stay the same?

[coder2000 0]

// Create a new image object with a size of 100x100 pixels.image1 = new Image(100,100);// Load the image into the objectimage1.src = "myimage.gif";

The src should be the full location of the image.

[Hercco 0]

And to make things slightly easier for you, you could use server side scripting for getting those image dimensions. For PHP that'd be function getimagesize().

[pbolduc 0]

Here is a javascript that pre-loads the second image just above the link itself. You place the code for each link where you want the link to go... nothing in the head tag.

 

<script language="JavaScript">SecondImage00='image1.gif';</script><a href="http://forums.xisto.com/no_longer_exists/; onMouseOver="{OrigImage00=img00.src; img00.src=SecondImage00} " onMouseOut="img00.src=OrigImage00"><img alt="" name="img00" border="0" src="image2.gif" width="0" height="0"  onLoad="TempImage00=new Image(0,0); TempImage00.src=SecondImage00"></a><script language="JavaScript">SecondImage10='image1.gif';</script><a href="http://forums.xisto.com/no_longer_exists/; onMouseOver="{OrigImage10=img10.src; img10.src=SecondImage10} " onMouseOut="img10.src=OrigImage10"><img alt="" name="img10" border="0" src="image2.gif" width="0" height="0"  onLoad="TempImage10=new Image(0,0); TempImage10.src=SecondImage10"></a>

You can add as many links as you want you just have to change the image number shown below in red:

 

<script language="JavaScript">SecondImage10='image1.gif';</script>

<a href="http://www.domain.com//" onMouseOver="{OrigImage10=img10.src; img10.src=SecondImage10} " onMouseOut="img10.src=OrigImage10">

<img alt="Alt Text Here" name="img10" border="0" src="image2.gif" width="0" height="0" onLoad="TempImage10=new Image(0,0); TempImage10.src=SecondImage10"></a>

 

It is easier than it looks... I use the find and search in my editor.

 

image1.gif is the url of the image you want when the mouse is over the link.

 

image2.gif is the url of the image you want when the mouse is out.

 

If you use it and have any problems just let me know and I will help.

 

pete