image preload not preloading problem

[curlyman72]

I have a script that preloads a series of images into an array. The script does do the mouseover and mouseout correctly, however, everytime the user moves to a different image, the images are downloaded instead of referencing the preloaded images. Any ideas on why? Can someone help me out and point some fingers at the possible cause? Thank you!

online sample to show that preloaded images are not being referenced: [nls.best.vwh.net ]

Here is the script:

<script type="text/javascript" >
//voting script that highlights range of stars
<!--

var myimagesOn = new Array("1_on.gif","2_on.gif","3_on.gif","4_on.gif","5_on.gif","6_on.gif","7_on.gif","8_on.gif","9_on.gif","10_on.gif");
var myimagesOff = new Array("1_off.gif","2_off.gif","3_off.gif","4_off.gif","5_off.gif","6_off.gif","7_off.gif","8_off.gif","9_off.gif","10_off.gif");

var imagesOn = new Array(myimagesOn.length); // currently reporting 10 ON images
var imagesOff = new Array(myimagesOff.length); // currently reporting 10 OFF images

if (document.images) {
// preload ON images
imagesOn[0] = new Image(25,28); // preload image 0 with custom W & H
imagesOn[0].src = "images/voting/"+myimagesOn[0];

for (x=1; x<9; x++){ // initialize middle images with same W & H
imagesOn[x] = new Image(23,28);
imagesOn[x].src = "images/voting/"+myimagesOn[x];
}

imagesOn[9] = new Image(28,28); // preload image 9 with custom W & H
imagesOn[9].src = "images/voting/"+myimagesOn[9];

// preload OFF images
imagesOff[0] = new Image(25,28);
imagesOff[0].src = "images/voting/"+myimagesOff[0];

for (y=1; y<9; y++){
imagesOff[y] = new Image(23,28);
imagesOff[y].src = "images/voting/"+myimagesOff[y];
}

imagesOff[9] = new Image(28,28);
imagesOff[9].src = "images/voting/"+myimagesOff[9];
}

function highlightStars(level) {
if (document.images) {
for (var i=0; i <= level-1; i++) {
document.images[i].src = imagesOn[i].src;
}
for (var i=9; i >= (level); i--) {
document.images[i].src = imagesOff[i].src;
}
}
}

function setStarLevel(voted) {
for (var i=1; i <= voted; i++) {
document.getElementById(i).src = "images/voting/"+i+"_on.gif";
}
}
-->
</script>

[curlyman72]

Ok, it I made some changes and now it caches the images but if the user has their browser set to "check for newer versions of stored pages: Eevery visit to the page" (as do most developers) it ignores the cache. Is there a way to force caching regardless of the users browser settings?