Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementById() rollover not working in IE?

    Hello,

    I'm building a simple image viewer - clicking on the thumbnail images swap out the larger image. You can view it in action here:

    http://addelement.com/portfolio/beamedceiling/

    For some reason, it won't work in IE6. I think I'm overlooking something small. IE doesn't seem to respond to this code:

    Code:
    document.getElementById('viewerLg').setAttribute('src',newsrc)
    Here's the complete script, so you don't have to dig it out:

    Code:
    function findimg()
    {
      var imgs,i;
      // Loop through all images, check if they contain the class roll
      imgs=document.getElementsByTagName('img');
      for(i=0;i<imgs.length;i++)
      {
        if(/roll/.test(imgs[i].className))
        {
          // alert(imgs[i].src);
    	  // add the function roll to the parent Element of the image
          imgs[i].parentNode.onclick=function(){roll(this);};
        }
      }
    }
    
    function roll(o)
    {
     var i,isnode,src,ftype,newsrc,nownode;
    // loop through all childNodes
     for (i=0;i<o.childNodes.length;i++)
     {
      nownode=o.childNodes[i];
    // if the node is an element and an IMG set the variable and exit the loop
      if(nownode.nodeType==1 && /img/i.test(nownode.nodeName))
      {
       isnode=i;
       break;
      }
     }
    // check src and do the rollover
     src = o.childNodes[isnode].src;
     ftype = src.substring(src.lastIndexOf('.')-2, src.lastIndexOf('.'));
     newsrc = 'viewerlg/viewerlg-' + ftype + '.jpg';
     //alert(newsrc);
     document.getElementById('viewerLg').setAttribute('src',newsrc);
    }
    
    window.onload=function() {
     findimg();
    }
    What am I missing??

    Thanks,
    ~jeff
    Last edited by jkies00; 09-08-2006 at 10:21 PM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I am not sure if this is the error, but you have declared an object's native property as a variable. This could hurt:

    var i,isnode,src,ftype,newsrc,nownode;
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good catch, Kor, but unfortunately, that wasn't it. I've modified my scripe to replace the image element altogther, but it still doesn't work in IE.

    What am I doing wrong? Here's the script:

    Code:
    function findimg()
    {
      var imgs,i;
      // Loop through all images, check if they contain the class roll
      imgs=document.getElementsByTagName('img');
      for(i=0;i<imgs.length;i++)
      {
        if(/roll/.test(imgs[i].className))
        {
          // alert(imgs[i].src);
    	  // add the function roll to the parent Element of the image
          imgs[i].parentNode.onclick=function(){roll(this);};
        }
      }
    }
    
    function roll(o)
    {
      var i,isnode,imgsrc,ftype,newsrc,nownode;
      // loop through all childNodes
       for (i=0;i<o.childNodes.length;i++)
       {
         nownode=o.childNodes[i];
         // if the node is an element and an IMG set the variable and exit the loop
         if(nownode.nodeType==1 && /img/i.test(nownode.nodeName))
         {
           isnode=i;
           break;
         }
       }
       // create new src
       imgsrc = o.childNodes[isnode].src;
       ftype = imgsrc.substring(imgsrc.lastIndexOf('.')-2, imgsrc.lastIndexOf('.'));	
       newsrc = 'viewerlg/viewerlg' + ftype + '.jpg';
       
       // create new image element
       var imgNew = document.createElement('img');
       imgNew.src = newsrc;
       imgNew.id = 'viewerLg';
       
       // replace image
       var imgMain = document.getElementById('viewerLg');
       var imgParent = imgMain.parentNode;
       imgParent.replaceChild(imgNew, imgMain);      
    }
    
    window.onload=function() {
      findimg();
    }
    You can view it in action here:

    http://s177239193.onlinehome.us/port...beamedceiling/

    It works fine in FF, but doesn't work in IE. Please help!

    ~jeff

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    Code:
    imgs[i].parentNode.onclick=function(){roll(this);};
    see what IE returns for the o argument in roll(o).


  •  

    Posting Permissions

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