My first tutorial on this board. Most tuts I see here are all design, so I plan on filling up the programming tuts!

This tutorial will teach you how to use my newly coded image preloader this is very basic so I assume you know how to install a javascript as well as knowledge of basic HTML.

The Script:
Code:
<script type="text/javascript">
[i]<!--
var loading = Array();
var standard = Array();
var rollover = Array();

function image_preload(lImages)
{
    for(i = 0; i < lImages.length; i++)
    {
        loading[i] = lImages[i];
    }

    for(i = 0; i < loading.length; i++)
    {
        var lVal = loading;

        standard[lVal] = new Image();
        standard[lVal].src = "./images/menu_" +lVal+ ".png";

        rollover[lVal] = new Image();
        rollover[lVal].src = "./images/menu_" +lVal+ "_over.png";
    }
}
// -->
</script>
Since the above code was used on a previous site I coded the image paths are predefined, you can edit them above in line 19 and 22

As for the preloading part you will need to put the onload tag and execute the 'image_preload' function like this:

Code:
<body onload="image_preload(Array("home", "about", "portfolio", "contact"));">
This will preload current images depending on what paths you defined in the script

Code:
./images/menu_home.png
./images/menu_home_over.png
./images/menu_about.png
./images/menu_about_over.png
./images/menu_portfolio.png
./images/menu_portfolio_over.png
./images/menu_contact.png
./images/menu_contact_over.png
These can be called by the 'Standard' and 'Rollover' array defined in the script. So for a simple rollover function we can just do this on an image, lets say its the home button:

Code:
<img src="./images/menu_home.png" onmouseover="this.src=rollover['home'].src;" onmouseout="this.src=standard['home'].src;" alt="Home" />
As you can see its changing the source (the image path) to the value of rollover]'home'].src, and when out its changing again to standard['home'].src, the rollover array contains the *_over.png images as preloaded and the standard does the same just for normal (not roll'ed over images), this function is added so you're visitors wouldn't wait a micro second or something like that before the browser reload the original image from the cache but then use the already preloaded one.

And heres all the code for a small menu:

Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <title>Akkad Image Preloader</title>

        <script type="text/javascript">
        [i]<!--
        var loading = Array();
        var standard = Array();
        var rollover = Array();

        function image_preload(lImages)
        {
            for(i = 0; i < lImages.length; i++)
            {
                loading[i] = lImages[i];
            }

            for(i = 0; i < loading.length; i++)
            {
                var lVal = loading;

                standard[lVal] = new Image();
                standard[lVal].src = "./images/menu_" +lVal+ ".png";

                rollover[lVal] = new Image();
                rollover[lVal].src = "./images/menu_" +lVal+ "_over.png";
            }
        }
        // -->
        </script>
    </head>
    <body onload="image_preload(Array("home", "about", "portfolio", "contact"));">
        <img src="./images/menu_home.png" onmouseover="this.src=rollover['home'].src;" onmouseout="this.src=standard['home'].src;" alt="Home" />
        <img src="./images/menu_about.png" onmouseover="this.src=rollover['about'].src;" onmouseout="this.src=standard['about'].src;" alt="About" />
        <img src="./images/menu_portfolio.png" onmouseover="this.src=rollover['portfolio'].src;" onmouseout="this.src=standard['portfolio'].src;" alt="Portfolio" />
        <img src="./images/menu_contact.png" onmouseover="this.src=rollover['contact'].src;" onmouseout="this.src=standard['contact'].src;" alt="Contact" />
    </body>
</html>