SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Javascript function undefined error!

    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

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In the future, put your code in code blocks, or better still, use the code highlighting tool available. Horizontal scrolling is horrible.

    You have to initialise your script after the page has finished loading (via window.onload). The problem is probably due to the fact that when you hover over the links, document.images (in the changeimage function) doesn't exist yet and that's why it's undefined. You should also think about using unobtrusive javascript (some good links there). You should above all stop using onmouseover and onmouseout, it's messy and bad practice.

    You need to do something like this:
    Code Javascript:
    window.onload = init;
    function init() {
      var links = document.getElementsByTagName('a');
      for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.onmouseover = function() {
          changeimage(this.href);
        }
        link.onmouseout = startCount;
      }
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •