Internet Explorer Javascript Image Problem

Question

I following the book "DOM Scripting" by Jeremy Keith and I have hit a wall in trying to get a small image gallery to render correctly in Internet Explorer 6/7.

I have 4 thumbnails which load in a placeholder when clicked using the following code:

function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return true;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    if (!document.getElementById("description")) return false;
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
    var description = document.getElementById("description");
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
    }
    return false;
}

My placeholder is inserted into the page using createElement("img"), however when I click a thumbnail the image is compressed to the size of the placeholder that it replaced.

function preparePlaceholder() {
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","images/placeholder.gif");
    placeholder.setAttribute("alt","Gallery Placeholder");
    var description = document.createElement("p");
    description.setAttribute("id","description");
    var desctext = document.createTextNode("Choose an image");
    description.appendChild(desctext);
    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder,gallery);
    insertAfter(description,placeholder);
}

So the result as pictured below is a skewed image:

Live site here: http://anarchist.webuda.com/

Javascript here: http://pastebin.com/kaAhjdqk HTML here: http://pastebin.com/Dm5p2Dj6 CSS here: http://pastebin.com/yiVPiQZe

Answer 1

Try adding to the showPic function the next 2 lines after placeholder.setAttribute("src",source);

placeholder.removeAttribute('width');
placeholder.removeAttribute('height');

Using IE8 Developer Tools (in Compatibility Mode) I could reproduce the problem and find that the width and height are being assigned automatically. So I tested with the debugger using the removeAttribute and the image grew to the proper size. But I don't really know if the place for those lines is exactly right, so let me know.