Help with image preloading array [Archive]

svennie12

03-31-2008, 02:33 AM

Hi, I need to load 12 images (zodiac signs), all of which will be used in mouseover events. Since there are 12, I figured I should use an array for the preload. Thing is I am terrible with arrays. I have created one, and it does work, but in your opinion, is it the best way? I want the code to be as short and clean as possible... and I have a feeling mine is too long.

function preloader()
{
// counter
var i = 0;

// create object
imageObj = new Image();

// set image list
image = new Array();
image[0]="aries_sm.jpg"
image[1]="taurus_sm.jpg"
image[2]="gemini_sm.jpg"
image[3]="cancer_sm.jpg"
image[4]="leo_sm.jpg"
image[5]="virgo_sm.jpg"
image[6]="libra_sm.jpg"
image[7]="scorpio_sm.jpg"
image[8]="sagittarius_sm.jpg"
image[9]="capricorn_sm.jpg"
image[10]="aquarius_sm.jpg"
image[11]="pisces_sm.jpg"

// start preloading
for(i=0; i<=10; i++)
{
imageObj.src=image[i];
}

}
// show me -->
</script>

<body>

<h1>Horoscope for today: </h1>

<table border="0" width="100%">
<tr>
<td>
<img src = "aries_sm.jpg" name = "aries"
onMouseOver = "window.document.images[0].src = 'aries.jpg';"
onMouseOut = "window.document.images[0].src = 'aries_sm.jpg';">
</td>
<td>
<img src = "taurus_sm.jpg" name = "taurus"
onMouseOver = "window.document.images[1].src = 'taurus.jpg';"
onMouseOut = "window.document.images[1].src = 'taurus_sm.jpg';"></td>
<td>
<img src = "gemini_sm.jpg" name = "gemini"
onMouseOver = "window.document.images[2].src = 'gemini.jpg';"
onMouseOut = "window.document.images[2].src = 'gemini_sm.jpg';"></td>
<td>
<img src = "cancer_sm.jpg" name = "cancer"
onMouseOver = "window.document.images[3].src = 'cancer.jpg';"
onMouseOut = "window.document.images[3].src = 'cancer_sm.jpg';"></td>
</tr>

I've cut the rest of the rows out because I think you get the drift. Thoughts?

Thanks for your help!

codeexploiter

03-31-2008, 03:18 AM

You could have used any of the following methods to shorten the length of the method you've used. The first one is a straight forward method in which you initialize the array when you declare it.

image = new Array("aries_sm.jpg","taurus_sm.jpg","gemini_sm.jpg","cancer_sm.jpg","leo_sm.jpg","virgo_sm.jpg","libra_sm.jpg","scorpio_sm.jpg","sagittarius_sm.jpg","capricorn_sm.jpg","aquarius_sm.jpg","pisces_sm.jpg");

The second method is you create a string which contains all the image names with their extension delimited by comma (,) and perform a split operation on that string. As a result of that split operation it will return an array and each element of that array will hold an image name.

var imgnames = "aries_sm.jpg,taurus_sm.jpg,gemini_sm.jpg,cancer_sm.jpg,leo_sm.jpg,virgo_sm.jpg,libra_sm.jpg,scorpio_sm.jpg,sagittarius_sm.jpg,capricorn_sm.jpg,aquarius_sm.jpg,p isces_sm.jpg";
var image = imgnames.split(",");

But from my point of view you can go for the first method used