代码之家  ›  专栏  ›  技术社区  ›  Ashley

Internet Explorer Javascript图像问题

  •  1
  • Ashley  · 技术社区  · 14 年前

    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;
    }
    

    我的占位符是使用 createElement("img") 但是,当我单击缩略图时,图像会压缩到它所替换的占位符的大小。

    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);
    }
    

    因此,如下图所示的结果是一个倾斜的图像:

    In Chrome In Explorer

    http://anarchist.webuda.com/

    此处为Javascript: http://pastebin.com/kaAhjdqk 此处为HTML: http://pastebin.com/Dm5p2Dj6 http://pastebin.com/yiVPiQZe

    1 回复  |  直到 14 年前
        1
  •  1
  •   Mariano Desanze    14 年前

    尝试添加到 showPic 函数后面的两行 placeholder.setAttribute("src",source);

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

    使用 IE8开发工具 (在兼容模式下)我可以重现问题并发现 width height 正在自动分配。所以我使用 removeAttribute 图像长到了合适的大小。但我真的不知道这些线路的位置是否正确,所以请告诉我。