黑马程序员技术交流社区

标题: 大家帮忙看看这段javascript有什么问题（不显示图片，只显示提示的文本） [打印本页]

作者: 9881008杜鹏 时间: 2011-11-10 20:49
标题: 大家帮忙看看这段javascript有什么问题（不显示图片，只显示提示的文本）
  <script type="text/javascript">
var datas= {"image/00-03smail.JPG":["image/00-03.jpg","swelte","24"],"image/00-51smail.JPG":["image/00-51.jpg","yinger","21"],"01-01smail.JPG":["image/01-01.jpg","henkes","23"]};
function TrendsCreate()
{
   //var div = document .createElement ("div");
   for(var smailimg in datas )
   {
         var smailImg = document.createElement ("img");
         smailImg.src = smailimg ;

         smailImg .setAttribute ("imgaddress",datas[smailimg][0]);
         smailImg .setAttribute ("Height",datas[smailimg][1]);
         smailImg .setAttribute ("Name",datas[smailimg][2]);
         smailImg .onmouseover= function (){
         document.getElementById ("detailimg").src = this .getAttribute ("imgadress");
         document.getElementById ("detailHeight").innerHTML =this .getAttribute ("Height");
         document.getElementById ("detailName").innerHTML = this.getAttribute ("Name");
         var div1 =document .getElementById ("detail");
         div1.style.top = window.event.clientY;
         div1.style.left = window.event.clientX;
         div1.style.display ="";
         };

         smailImg .onmouseout = function (){
         var div1 =document .getElementById ("detailimg");
         div1.style.display ="none";
         };
         document .body .appendChild (smailImg );
         //div1.appendChild (smailImg );

   }
   // document.body.appendChild (smailImg );
}
</script>
</head>
<body  onload="TrendsCreate()">
<div id="detail" style ="position:absolute ;display:none ; border-style:inherit;">
<img src="" id ="detailimg"/>
<p id="detailHeight"></p>
<p id="detailName"></p>
</div>
</body>
</html>

作者: 付炯 时间: 2011-11-15 17:25
目前至少发现这样几处错误
1、smailImg.setAttribute ("Height",datas[smailimg][1]); smailImg.setAttribute ("Name",datas[smailimg][2]);
根据上面给出的数组 [1]对应的是数组中名称的字符串 [2]对应的是年龄的值这样赋值的时候把名称赋给了Height字段而把年龄值赋给了Name字段
2、document.getElementById ("detailimg").src = this .getAttribute ("imgadress");
根据你声明的字段名称应该是imgaddress 上下不一致
我认为如果不解决图片的加载问题鼠标到达不了图片所在的位置就不能触发onmouseover事件说明文字也就显示不出来了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2