将鼠标移到一张小图上,会显示大图和详细信息(大图总是取不到)

<!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">
    function initEvent(){
        var data = { "../images/0.jpg": ["../images/1.jpg", "小甜", "156"]}
        
      
        for(var key in data) {
            var img = document.createElement("img");
            img.src = key;
            img.setAttribute("a1", data[key][0]);
            img.setAttribute("a2", data[key][1]);
            img.setAttribute("a3", data[key][2]);            img.onmouseover = function() {                     //鼠标移到上面就显示层
                document.getElementById("details").src = this.getAttribute("a1");//在这里添加监视:前面是绝对路径,后面是相对路径
                document.getElementById("p1").innerHTML = this.getAttribute("a2");
                document.getElementById("p2").innerHTML = this.getAttribute("a3");                var div = document.getElementById("div");   //设置图片显示的位置
                div.style.left = window.event.clientX;
                div.style.top = window.event.clientY;                div.style.display = "";            }
            img.onmouseout = function() {
                var div = document.getElementById("div");   //鼠标移开就消失
                div.style.display = "none";            }        }
        document.body.appendChild(img);
     }
        
    
    </script>
</head>
<body onload="initEvent()">
<div id="div"><img src="" id="details" style="display:none"/><br/>
<p id="p1"></p>
<p id="p2"></p>
</div>
</body>
</html>

解决方案 »

  1.   

    取值、赋值都是成功的，但#details是隐藏的，除了要修改#div元素的display属性为空或block之外，还要将#details的display样式属性设置为空或'inline'。
      

  2.   


    <!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">
      function initEvent(){
      var data = { "http://c.csdn.net/bbs/t/5/i/pic_logo.gif": ["jpg", "小甜", "156"]}
        
        
      for(var key in data) {
      var img = document.createElement("img");
      img.src = key;
      img.setAttribute("a1", data[key][0]);
      img.setAttribute("a2", data[key][1]);
      img.setAttribute("a3", data[key][2]);
    }
      img.onmouseover = function(e) { //鼠标移到上面就显示层
      e = window.event || e;
      document.getElementById("details").src = this.getAttribute("a1");//在这里添加监视:前面是绝对路径,后面是相对路径
      document.getElementById("p1").innerHTML = this.getAttribute("a2");
      document.getElementById("p2").innerHTML = this.getAttribute("a3");  var div = document.getElementById("div"); //设置图片显示的位置
      div.style.left = e.clientX;
      div.style.top = e.clientY;  div.style.display = "";  
      div.onmouseout = function() {
      var div = document.getElementById("div"); //鼠标移开就消失
      div.style.display = "none";  }  }
      document.body.appendChild(img);
      }
        
        
      </script>
    </head>
    <body onload="initEvent()">
    <div id="div">
    <img src="" id="details" style="display:none"/><br/>
    <p id="p1"></p>
    <p id="p2"></p>
    </div>
    </body>
    </html>这个意思？
    楼主重构下吧，这代码。。！@～！