div Js隐藏显示
<!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>
<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>