动态创建图片问题,请高手帮忙！

Question

function showimage(url,index,total){
var x,y;
for(var i=0;i<=total;i++){
if(document.getElementById('new'+i)!=null){
currentElement = document.getElementById('new'+i);
currentElement.parentNode.removeChild(currentElement);
}
}
var newdiv = document.createElement("div");
var newimg = document.createElement("img");
document.body.appendChild(newdiv);
x = event.clientX;
y = event.clientY;
newdiv.style.top=y;
newdiv.style.left=x;
newdiv.id="new"+index;
newdiv.style.width='200px';
newdiv.style.height='120px';
newdiv.style.zIndex='2';
newdiv.style.border='1pt solid #555555'; 可以运行到这里，下面不运行了。
newimg.src=url;
newimg.id="new"+index;
newing.style.position='absolute';
newimg.style.top=y;
newimg.style.left=x;
newimg.width='100px';
newimg.height='60px';
newimg.style.zIndex='2';
document.body.appendChild(newimg);
newdiv.appendChild(newimg);
}要实现的功能是鼠标移到文字上面动态显示缩略图

Answer 1

方法一:做个onmouseover事件,移动上去时候把图片替换成小图

Answer 2

我是这样做的，我是想问上面的代码怎么不出来效果？
div可以显示，就是div里面不显示图片。

Answer 3

没问题啊！可以正常删除，url也是对的。

Answer 4

如果出来的是叉号 那你右键看下属性 URL确实是对的?

Answer 5

叉号都没有，就出来一个div，会不会是创建img还要有什么步骤啊？

Answer 6

newing.style.position='absolute';中 newing写错了 改成 newimg
newimg.style.position='absolute';

Answer 7

newimg.style.position='absolute'
这一句应该可以去掉的吧！我是想图片显示在div里面，改过来了还是不能显示图片。

Answer 8

 newing.style.position='absolute';// newimg-----

Answer 9

谢谢楼上各位，我刚刚修改了一下，上面的代码我自己看都有一点问题。function showimage(url,index){
var x,y;
var newdiv = document.createElement("div");
var newimg = document.createElement("img");
document.body.appendChild(newdiv);
newdiv.style.position='absolute';
x = event.clientX;
y = event.clientY;
newdiv.style.top=y;
newdiv.style.left=x;
newdiv.id="new"+index;
newdiv.style.width='200px';
newdiv.style.height='120px';
newdiv.style.zIndex='2';
newdiv.style.border='1pt solid #555555';
newimg.src=url;
newimg.style.position='relative';
alert(url);
newimg.style.top=y;
newimg.style.left=x;
newimg.width='100px';
newimg.height='60px';
newimg.style.zIndex='2';
document.body.appendChild(newimg);
newdiv.appendChild(newimg);
}

Answer 10

<script type="text/javascript">
<!--
var newdiv = document.createElement("div");
    var newimg = document.createElement("img");
    document.body.appendChild(newdiv);    newdiv.style.width='200px';
    newdiv.style.height='120px';
    newdiv.style.zIndex=2;
    newdiv.style.border='1pt solid #555555'; //可以运行到这里，下面不运行了。
    newimg.src="";
    newimg.style.width='100px';
    newimg.style.height='60px';
    newimg.style.zIndex=2;
    newdiv.appendChild(newimg);//-->
</script>

Answer 11

document.body.appendChild(newimg); 这句应该是
document.body.appendChild(newdiv); function showimage(url,index,total){
    var x,y;
    for(var i=0;i<=total;i++){
        if(document.getElementById('new'+i)!=null){
            currentElement = document.getElementById('new'+i);
            currentElement.parentNode.removeChild(currentElement);
        }
    }
    var newdiv = document.createElement("div");
    var newimg = document.createElement("img");
    document.body.appendChild(newdiv);
    x = event.clientX;
    y = event.clientY;
    newdiv.style.top=y;
    newdiv.style.left=x;
    newdiv.id="new"+index;
    newdiv.style.width='200px';
    newdiv.style.height='120px';
    newdiv.style.zIndex=2;
    newdiv.style.border='1pt solid #555555';
    newimg.src="images/a11.jpg";
    newimg.id="new"+index;
    newimg.style.position='absolute';
    newimg.style.top=y;
    newimg.style.left=x;
    newimg.width=100;
    newimg.height=60;
    newimg.style.zIndex=2;
    document.body.appendChild(newdiv);
    newdiv.appendChild(newimg);
}

Answer 12

那个删除我放到另外一个方法里面去了，没有问题，alert(url)显示也没有问题。

Answer 13

    newimg.style.width='100px';
    newimg.style.height='60px';
//主要是这两句

Answer 14

function showimage(url,index){
var x,y;
var newdiv = document.createElement("div");
var newimg = document.createElement("img");
document.body.appendChild(newdiv);
newdiv.style.position='absolute';
x = event.clientX;
y = event.clientY;
newdiv.style.top=y;
newdiv.style.left=x;
newdiv.id="new"+index;
newdiv.style.width='200px';
newdiv.style.height='120px';
newdiv.style.zIndex='2';
newdiv.style.border='1pt solid #555555';
newimg.src=url;
newimg.style.position='relative';
newimg.width='100px';
newimg.height='60px';
newimg.style.zIndex='2';
newdiv.appendChild(newimg);
}现在是这个样子了，图片还是不显示。

Answer 15

<body></body>
<script type="text/javascript">
<!--
    var newdiv = document.createElement("div");
    var newimg = document.createElement("img");
    document.body.appendChild(newdiv);
    newdiv.style.width='200px';
    newdiv.style.height='120px';
    newdiv.style.zIndex='2';
    newdiv.style.border='1pt solid #555555';
    newimg.src="http://list.image.baidu.com/t/image_category/image_funny_files/funny_egaosucai04.jpg";
    newimg.style.width='100px';//
    newimg.style.height='60px';//
    newimg.style.zIndex='2';
    newdiv.appendChild(newimg);
//-->
</script>

Answer 16

去掉style.直接newimg.width
newimg.height

Answer 17

还要注意,动态创建img的时候会有个很恶心的width和height属性问题
最好new完img以后马上给宽和高

Answer 18

问题解决了，谢谢楼上各位。
Beenz说的正确，把顺序换一下就可以了var newimg = document.createElement("img");
newimg.style.width='100px';
newimg.style.height='60px';

Answer 19

这个设置必须要用newimg.style.width吧

Answer 20

直接用newimg.width  = "100"; //不能加px
newimg.height ="100";