Hiya

I'm putting together a basic JS image gallery which has automatic picture flicking and when the user hovers on a link the gallery will pause and show the picture relevant to that particular link. I've got it working now as far as I can see but if you hover your mouse over a link when the page hasn't finished loading you get a error message: Either changeimage is undefined and/or startcount() is undefined. Can anybody point me in the right direction?

var myimages=new Array()
var c = 0;
var iTimerID = "";

function preloadimages(){
for (var i=0; i<preloadimages.arguments.length; i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("images/dat_categories_image-1.jpg","images/dat_categories_image-10.jpg","images/dat_categories_image-4.jpg","images/dat_categories_image-9.jpg","images/dat_categories_image-5.jpg","images/dat_categories_image-11.jpg","images/dat_categories_image-15.jpg","images/dat_categories_image-12.jpg","images/dat_categories_image-13.jpg","images/dat_categories_image-14.jpg","images/dat_categories_image-16.jpg","images/dat_categories_image-6.jpg");

function timedCount()
{
changeimage(myimages[c])
c=c+1
if(c>11)
{
c=0
}
}

function startCount()
{
iTimerID = setInterval("timedCount()",2500)
}

function changeimage(image){
if (document.images){
document.images.targetimage.src=image.src
}
}

window.onload = function() {
startCount();
}

and then my link would contain something like this:

<a onmouseover="changeimage(myimages[0],this.href); clearInterval(iTimerID);" onmouseout="startCount()" href="#">Image 1</a>

This is all done dynamically via PHP so in this instance there would be 11 links

<a onmouseover="changeimage(myimages[1],this.href); clearInterval(iTimerID);" onmouseout="startCount()" href="#">Image 2</a>

etc...

I'm sure i'm close but am new to Javascript and would appreciate a little help!

Thanks

Jonathan