3
I'm working a jewelry/rosary design web site at http://www.rosaryshop.com/rosariesAndKits2.php.
As the user makes selections, it updates images of various parts, giving them a preview of the finished item. The preview resides within a div and is simply a series of <br>-separated images. Simple html. The system is working fine with FireFox and Safari, but some MSIE 6 and 7 users are reporting that only the first image is updating and the remainder remain static. I've tried several different approaches over the last two weeks, all with the same frustrating results. I figured it is time to ask others for their insights.
The div contains about 20 small images. The MSIE behavior is: When first loaded, the div content USUALLY displays correctly, but when updated, only the topmost image updates and the rest don't change. For other browsers, all images are updating correctly. I can post the javascript if you wish, but it doesn't appear to be the problem (he said ignorantly).
1) My first approach was to completely replace the div content with new <img> tags using innerHTML each time the user makes a change (document.getElementById(divID).innerHTML = newContent). I have confirmed that the html is valid by vetting at the W3C validator and loading it directly into a web browser. Some MSIE users said this wasn't working, so I tried...
2) Leave the html content static after initial filling of the div, updating the src attributes via document.getElementById(imgID).src = newsrcvalue. Each image has a unique id. Some MSIE users said it still wasnt working, so I tried...
3) After reading about MSIE image update problems, and Microsoft notes, tried inserting the <img> tags without any src attribute (<img name="imgName" id="imgID" ...>, then assign the source attribute. Still didn't work, so....
4) Tried falling back to an earlier DOM0 method to update the src attributes, document.images[imageName].src = newsrcvalue. Still no joy. That same method is working (or at least was) on another, earlier web page.
The initial content of the div is appearing properly, and the topmost image is updating, at least once. But the images below it are not updating in MSIE. In other browsers it seems to work fine. I'm not seeing any warning or errors in the logs on FireFox or Safari. The javascript I'm using all appears valid.
Anyone run into this or have any suggestions as to other means of approaching this problem? I really am out of ideas on this one.
Thanks for your thoughts on this.
Seth
