Jump to content
xisto Community
Sign in to follow this  
enterthematrix

Preloading Images How do I do it?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
// 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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.