我正在阅读 Jeremy Keith 所著的《DOM Scripting》一书,但在尝试让小型图像库在 Internet Explorer 6/7 中正确呈现时遇到了困难。
我有 4 个缩略图,当使用以下代码单击时,它们会加载到占位符中:
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);
}
因此,如下图所示的结果是倾斜的图像:
实时站点:http://anarchist.webuda.com/
Javascript在这里:http://pastebin.com/kaAhjdqk HTML 在这里:http://pastebin.com/Dm5p2Dj6 CSS 在这里:http://pastebin.com/yiVPiQZe
最佳答案
尝试将 placeholder.setAttribute("src",source); 之后的接下来两行添加到
showPic
函数
placeholder.removeAttribute('width');
placeholder.removeAttribute('height');
使用IE8开发工具(在兼容模式下)我可以重现该问题,并发现宽度
和高度
正在自动分配。因此,我使用 removeAttribute
对调试器进行了测试,图像增长到了正确的大小。但我真的不知道这些线的位置是否完全正确,所以请告诉我。
关于javascript - Internet Explorer Javascript 图像问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3359910/