js动态创建图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//1window.onload事件
window.onload = function () {
document.getElementById('btn').onclick = function () {
//初始化数据.
var datas = {
"Images/1.jpg": ["Images/1_1.jpg", "张三", "178cm"],
"Images/2.jpg": ["Images/2_1.jpg", "李四", "170cm"]
};
//循环遍历每一条数据.for in
var dvobj = document.getElementById('dvSmallPic');
for (var key in datas) {
//1.创建一个img图片框.
var imgSmallObj = document.createElement('img');
imgSmallObj.src = key;
imgSmallObj.alt = datas[key][1];
imgSmallObj.style.marginRight = '32px'; //设置动态创建的图片之间的距离.marginRight.
//2给每个小图片添加onmouseover事件.
imgSmallObj.onmouseover = function () {
//获取层
var dvobjs = document.getElementById('dvDetails');
dvobjs.style.display = 'block';
//设置层的位置
dvobjs.style.position = 'absolute';
dvobjs.style.left = this.offsetLeft + 'px';
dvobjs.style.top = this.offsetTop + this.offsetHeight + 'px';
};
dvobj.appendChild(imgSmallObj);
};
};
};
</script>
</head>
<body>
<input type="button" name="name" value="动态创建图片"id="btn" />
<div id="dvSmallPic">
</div>
<div id="dvDetails">
<img id="imgBigPic" style="display:none; border:1px solid blue; width:300px;height:240px;" src="#" alt="Alternate Text" />
<p id="pname"></p>
<p id="pheight"></p>
</div>
</body>
</html>
