在图片上显示div

在DataList中绑定图片，当鼠标放图片上时显示一个div关于这张图片的详细信息，这个div显示的范围只能在图片的区域内，鼠标离开时，层就隐藏。请问这样的js该怎么写？哪位朋友提供一些源代码了，在网上没搜到类似代码。

解决方案 »

  1.   

    樓主試試看:<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="auther" content="fq" />
    <title></title>
    <style>
    body{margin:0; padding:0; font-size:14px; background:#fff; color:#000; font-family:simsun, arial; text-align:center; }
    div,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:0;}
    li {list-style-type:none;}
    h1,h2,h3,h4,h5,input{margin:0; padding:0; letter-spacing:1px;}
    table,tr,td,th{font-size:12px;}
    a{color:#000; text-decoration:none;}
    a:hover{color:#f60; text-decoration:underline;}
    dl{ width:304px; height:210px; float:left; display:inline; margin:50px 0 0 30%; background:#ccc}
    dt{ position:relative; height:184px; overflow:hidden;}
    dt label{ position:absolute; left:2px; bottom:-20px; width:300px; line-height:20px; height:20px; color:#fff; text-align:left; font-size:12px; background-color:#000; filter:alpha(opacity=70);opacity:0.7!important; overflow:hidden;}
    dt label a{ color:#fff;}
    dt label em{ font-style:normal; float:right; padding-right:5px;}
    dt label span{ padding:0 5px;}
    dt img{ width:300px; height:180px; padding:1px; border:1px solid #d1d1d1;}
    dd{ line-height:26px; height:26px; overflow:hidden;}
    dd span{ float:right; font-size:12px;}
    dd span a{ color:#090;}
    </style>
    <script>
    function css(who,key){
    // who   某个节点对象
    // key   CSS的属性名称
    if(who.style[key]!='')return who.style[key];
    if(!!window.ActiveXObject)return who.currentStyle[key];
    return document.defaultView.getComputedStyle(who,"")
    .getPropertyValue(key.replace(/([A-Z])/g,"-$1").toLowerCase()); 
    }
    function move(who,attr,val,s,act){
    // who 节点
    // attr  CSS属性
    // val  CSS属性的最终值
    // s  间隔时间（毫秒）
    // act 代表显示或隐藏
      var nonceAttr = parseInt(css(who,attr));
      var k = 0;
      var moveTile = null;
      function count() {
        if (nonceAttr != val){
          if (act == "show"){nonceAttr++}else{nonceAttr--};
          who.style[attr] = nonceAttr +"px";
          moveTile = setTimeout(count,s);
        }
      }
      count();
    }
    </script>
    </head>
    <body>
    <dl>
      <dt>
        <a href="#"><img src="http://www.china.com/zh_cn/tu_image/356top_1185_datu-2.jpg" /></a>
        <label>111111111</label>
      </dt>
      <dd><a href="#">信息标题</a></dd>
    </dl>
    <dl>
      <dt>
        <a href="#"><img src="http://www.china.com/zh_cn/tu_image/356top_1185_datu-2.jpg" /></a>
        <label>222222222</label>
      </dt>
      <dd><a href="#">信息标题</a></dd>
    </dl>
    <script>
    var dl = document.getElementsByTagName("dl");
    for( var i=0; i<dl.length; i++){
    dl[i].onmouseover = function(){
      clearTimeout(this.fx);
      var label = this.getElementsByTagName("label");
      move(label[0],"bottom",2,13,"show");
    }
    dl[i].onmouseout = function(){
        var label = this.getElementsByTagName("label");
      this.fx=setTimeout(function (){
     move(label[0],"bottom",-20,13,"hide");
      },0)
      
    }
    }
    </script>
    </body>
    </html>
      

  2.   

    <script type="text/javascript">
    function aa(val){
    var div = document.getElementById("div");
    if(val=="on"){
      div.style.display="block";
    }else if(val=="off"){
    div.style.display="none";
    }}
    </script>
    </head>
    <body>
    <img src="/img/searchResult.gif" onmouseover="aa('on')" onmouseout="aa('off')"/>
    <div style="width:200px; height:60px; background-color:#CCCCCC; position:absolute;left:20;top:20px;filter:alpha(opacity=70);opacity:0.7" id="div">sdada</div></body>