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:

document.getElementById('viewerLg').setAttribute('src',newsrc)

Here's the complete script, so you don't have to dig it out:


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

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;

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:


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/portfolio/beamedceiling/

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

~jeff

imgs[i].parentNode.onclick=function(){roll(this);};

see what IE returns for the o argument in roll(o).