现在的位置: 首页 > 综合 > 正文

div Js隐藏显示

2012年08月26日 ⁄ 综合 ⁄ 共 3804字 ⁄ 字号 评论关闭
<!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=gb2312" />
<title>无标题文档</title>
<style>

div.poptip {
 position: absolute;
 border-bottom: 2px solid #CCC;
 border-right: 2px solid #CCC;
 padding: 0;
 text-align: left;
 width: 300px;
 opacity: 0.9;
}
div.innertip {
 background: #D9EBC7;
 border: 1px solid #BBB;
 line-height: 1.8em;
}
.poptip > .innertip {
 margin-bottom: -1px;
}

div.poptip a {
 font-weight: normal;
 text-decoration: none;
}
div.poptip p.title {
 background: #D9EBC7;
 font-weight: bold;
 color: #666;
 padding: 0 0.5em;
 margin: 0;
}
.poptip .close {
 background:  #D9EBC7;
 float: right;
}
.poptip ul {
 margin: 0.5em 1em;
 padding: 0;
 list-style: none;
}
.poptip li {
 background:#D9EBC7;
 padding-left: 1;
 height: 1;
 overflow: hidden;
}
.poptip .readmore {
 margin: 0 0.5em;
 border-top: 1px solid #DAE1F1;
 text-align: right;
 background:#D9EBC7;
 padding-right: 1em;
}
.hnli{
width:255px;
}
</style>
</head>

<body>
<script language="javascript" type="text/javascript">
    function tagnone()
    {
     document.getElementById("tipdiv").style.display="none";
    }
    var offX = 2;
    var offY = 0;
    var width = 0;
    var height = 0;
    var scrollX = 0;
    var scrollY = 0; 
    var x = 0;
    var y = 0;
    function conentall(index)
    {
        var strAry=new Array();
        strAry[1]='<%=showStr01 %>';
        strAry[2]="2dddddddssssssssssssssd";
        var tip = parent.document.getElementById("tipDiv");
        tip.style.display="inline";
        tip.innerHTML = "<div class='poptip'><div class='innertip'><ul><li>"+strAry[index]+"</li><li><a onclick='tagnone()' class='close' title='关闭'>关闭</a></li></ul></div></div>";
       
        if (window.innerWidth) width = window.innerWidth - 18;
     else if (document.documentElement && document.documentElement.clientWidth)
      width = document.documentElement.clientWidth;
     else if (document.body && document.body.clientWidth)
      width = document.body.clientWidth;
    
     if (window.innerHeight) height = window.innerHeight - 18;
     else if (document.documentElement && document.documentElement.clientHeight)
      height = document.documentElement.clientHeight;
     else if (document.body && document.body.clientHeight)
      height = document.body.clientHeight;

     if (typeof window.pageXOffset == "number") scrollX = window.pageXOffset;
     else if (document.documentElement && document.documentElement.scrollLeft)
      scrollX = document.documentElement.scrollLeft;
     else if (document.body && document.body.scrollLeft)
      scrollX = document.body.scrollLeft;
     else if (window.scrollX) scrollX = window.scrollX;
      
     if (typeof window.pageYOffset == "number") scrollY = window.pageYOffset;
     else if (document.documentElement && document.documentElement.scrollTop)
      scrollY = document.documentElement.scrollTop;
     else if (document.body && document.body.scrollTop)
      scrollY = document.body.scrollTop;
     else if (window.scrollY) scrollY = window.scrollY;
    
     x=event.pageX?event.pageX:event.clientX+scrollX;
     y=event.pageY?event.pageY:event.clientY+scrollY;
    
        if(x+tip.offsetWidth+offX>width+scrollX){
  x=x-tip.offsetWidth-offX;
  if(x<0)x=0;
     }else x=x+offX;
     if(y+tip.offsetHeight+offY>height+scrollY){
      y=y-tip.offsetHeight-offY;
      if(y<scrollY)y=height+scrollY-tip.offsetHeight;
     }else y=y+offY;
     tip.style.left=x+"px";
     tip.style.top=y+"px";
     //tip.style.display = '';
    }
   
</script>

html部分
<img src="file:///E|/工作项目/大东区绿化/相关文件/需求/大东区绿化/古树.jpg" width="1004" height="1489" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="40,74,299,199" href="#"  onmouseover="conentall('ssssssssss');" onmouseout="tagnone()" />
</map>
 <!--弹出详细内容div-->
<div id="tipDiv" style="BORDER-RIGHT:#333366 1px solid; BORDER-TOP:#333366 1px solid; DISPLAY:none; Z-INDEX:1; BORDER-LEFT:#333366 1px solid; BORDER-BOTTOM:#333366 1px solid; POSITION:absolute; BACKGROUND-COLOR:#ffffcc"></div>
<!--弹出详细内容div-->

</body>
</html>

【上篇】
【下篇】

抱歉!评论已关闭.