Hiya

I'm currently developing a script for a page of products on my site. When you load the products page the script is just meant to scroll naturally through the product images that are listed on that page. If a use hovers their mouse over a link for a product then the image scrolling should stop and show the relevant picture. This should stay on that image permanently until the user rolls off the link and then the auto scrolling should start again. The script works reasonably well so far:


Code JavaScript:
<script type="text/javascript" src="includes/prototype.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var iIntervalID = null;
        myimages = new Array();
        var list = new Array();
        var image = '', c = 0;
 
        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 setimage(event, image)
        {
            if (document.getElementById('targetimage'))
            {
                document.getElementById('targetimage').src=image.getAttribute('src')
            }
        }
 
        function timedCount()
        {
            setimage('', myimages[c])
            c=c+1;
            if(c>11)
            {
                c=0;
            }
        }
 
        function startCount()
        {
            iIntervalID = setInterval("timedCount()",2500);
        }
 
        function stopCount()
        {
            clearInterval(iIntervalID);
        }
 
        function attachEvents()
        {
            var list = Element.extend(document.getElementsByClassName('pictrigger'));
 
            for (var a=0; a<list.length; a++)
            {
                list[a].observe('mouseover', setimage.bindAsEventListener(this,    myimages[a]));
                list[a].observe('mouseover', stopCount.bindAsEventListener());
                list[a].observe('mouseout', startCount.bindAsEventListener());
            }
        }
 
        window.onload = function() {
            attachEvents();
            startCount();
        }
 
</script>

The problem is that if you try to hover your mouse on the link before the page has finished loading I get an error saying "iIntervalID is undefined" as the setInterval has not returned a value to us yet.

This means that when the user hovers their mouse over the link the image will automatically flick on after a set amount of time rather than holding till the mouse is off the link.

Can anybody help me as i'm really stuck with where to go with this now,

Thanks