css样式：
.tooltip{ border:1px solid #f00;} .picleft{ width:100px; padding:10px;}
javascript代码：
var datas = { "images/01.jpg": ["images/1.jpg", "张无极", "148cm"], "images/02.jpg": ["images/2.jpg", "刘苏宁", "190cm"], "images/03.jpg": ["images/3.jpg", "张三丰", "130cm"] }; function loadpics() { //动态建立一个层 var div = document.createElement("<div id='containers' style="position:absolute"<div>"); document.body.appendChild(div); //把小图片加载到div中 for (var smallpicpath in datas) { var imgsmall = document.createElement("img"); imgsmall.src = smallpicpath; imgsmall.className = "picleft"; div.appendChild(imgsmall); //至此小图片加载完毕 //以下分别获取小图的地址及相关说明为其特定属性 imgsmall.setAttribute("a0",datas[smallpicpath][0]); imgsmall.setAttribute("a1",datas[smallpicpath][1]); imgsmall.setAttribute("a2",datas[smallpicpath][2]); imgsmall.onmouseover = function () { //把要显示的大图放在动态生成的div中 var div = document.createElement("<div class='tooltip' style="position:absolute"></div>"); div.style.left = window.event.clientX; div.style.top = window.event.clientY; document.body.appendChild(div); var bigimg = document.createElement("img"); bigimg.src = this.getAttribute("a0"); var p1 = document.createElement("<p></p>"); p1.innerHTML = "姓名：" + this.getAttribute('a1'); var p2 = document.createElement("<p></p>"); p2.innerHTML = "身高：" + this.getAttribute('a2'); div.appendChild(bigimg); div.appendChild(p1); div.appendChild(p2); }; imgsmall.onmouseout = function () { var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { var div = divs[i]; if (div.className == "tooltip") { document.body.removeChild(div); } } }; } }
var datas = { "images/01.jpg": ["images/1.jpg", "167cm"], "images/02.jpg": ["images/2.jpg", "150cm"], "images/03.jpg": ["images/3.jpg", "189cm"] } function loadimg() { var div = document.createElement("<div style="position:absolute;" id='div1'></div>"); document.body.appendChild(div); for (var smallimgpath in datas) { var img = document.createElement("img"); img.src = smallimgpath; div.appendChild(img); img.setAttribute("a0", datas[smallimgpath][0]); img.setAttribute("a1", datas[smallimgpath][1]); img.setAttribute("a2", datas[smallimgpath][2]); img.onmouseover = function () { var div = document.createElement("<div style="position:absolute" class='bigpic'></div>"); div.style.left = window.event.clientX; div.style.top = window.event.clientY; document.body.appendChild(div); var img = document.createElement("img"); img.src = this.getAttribute("a0"); div.appendChild(img); var p1 = document.createElement("<p></p>"); p1.innerHTML = "姓名：" + this.getAttribute("a1"); div.appendChild(p1); var p2 = document.createElement("<p></p>"); p2.innerHTML = "身高：" + this.getAttribute("a1"); div.appendChild(p2); }; img.onmouseout = function () { var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { var div = divs[i]; if (div.className == "bigpic") { document.body.removeChild(div); } } }; } }
网页代码：
<body οnlοad="loadpics()"> </body>
