<!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 type="text/css">
#show1{
display:none;
width:255px;
height:190px;
position:absolute;
background:url("images/bgCard.png");
z-index:2;
}
#show2{
display:none;
width:255px;
height:190px;
position:absolute;
background:url("images/bgCard.png");
z-index:2;
}
</style>
<script type="text/javascript">
function showTip(showdiv) {
var tipBox = document.getElementById(showdiv);
for(var i=1;i<3;i++)
{
var emp="show"+i;
if(showdiv==emp)
{
tipBox.style.display = "block";
}
else
{
document.getElementById(emp).style.display="none";
}
}
tipBox.style.top =event.y-190;
tipBox.style.left =event.x-50;
}
</script>
</head><body>
<div align="center"><img src="images/earth.jpg" usemap="#Map" border="0" alt=""/></div>
<div id="show1"><br /><br /><br />澳大利亚</div>
<div id="show2"><br /><br /><br />中国</div>
<map name="Map" id="Map">
<area shape="rect" coords="402,434,479,471" href="javascript:void(0);" onclick="showTip('show1')"/>
<area shape="rect" coords="322,273,399,310" href="javascript:void(0);" onclick="showTip('show2')"/>
</map>
</body>
</html>
网页效果:
存在的问题:现在通过不同的热点都能弹出对应的隐藏DIV了。。现在主要是怎么关闭DIV,我要的效果是鼠标点击热点之外的区域,DIV就全部隐藏啦。大家帮忙解决下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>map.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.map {
width: 800px;
height: 600px;
background: transparent url("http://hiphotos.baidu.com/pjw4321/pic/item/13ae8d600d0e005cebf8f885.jpg") no-repeat center center;
}
.city {
height: 40px;
width: 50px;
position: absolute;
left: 505px;
top: 490px;
cursor: pointer;
border: 1px solid red;
}
#show {
display: none;
height: 40px;
width: 50px;
position: absolute;
z-index: 2;
background-color: #CCCCFF;
border: 1px solid #FFFF00;
}
</style>
<script type="text/javascript">
function showTip(e, o) {
var tipBox = document.getElementById("show");
tipBox.style.display = "block";
var event = e || window.event;
tipBox.style.top = event.clientX + "px";
tipBox.style.left = event.clientY + "px";
tipBox.innerHTML = o.title;
}
function hideTip() {
var tipBox = document.getElementById("show");
tipBox.style.display = "none";
}
</script>
</head>
<body>
<div class="map"></div>
<div class="city" onclick="alert('广东');" title="这是广东省,understand!" onmouseover="showTip(event, this)" onmouseout="hideTip()"></div>
<div id="show"></div>
</body>
</html>
用一个div即可,鼠标离开隐藏div
我之前是这么做的
、
觉得效果不好,DIV老闪闪的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>map.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.map {
width: 800px;
height: 600px;
background: transparent url("http://hiphotos.baidu.com/pjw4321/pic/item/13ae8d600d0e005cebf8f885.jpg") no-repeat center center;
}
.city {
height: 40px;
width: 50px;
position: absolute;
left: 505px;
top: 490px;
cursor: pointer;
border: 1px solid red;
}
#show {
display: none;
height: 100px;
width: 120px;
position: absolute;
z-index: 2;
background-color: #CCCCFF;
border: 1px solid #FFFF00;
}
#show div.title {
height: 20px;
width: 120px;
border-bottom: 1px solid #FFFF00;
}
#msg {
height: 78px;
width: 120px;
}
</style>
<script type="text/javascript">
function showTip(e, o) {
var tipBox = document.getElementById("show");
tipBox.style.display = "block";
var event = e || window.event;
tipBox.style.top = event.clientX + "px";
tipBox.style.left = event.clientY + "px";
document.getElementById("msg").innerHTML = o.title;
}
function hideTip() {
var tipBox = document.getElementById("show");
tipBox.style.display = "none";
}
</script>
</head>
<body>
<div class="map"></div>
<div class="city" title="这是广东省,understand!" onclick="showTip(event, this)"></div>
<div id="show">
<div class="title">
<span>地域信息</span>
<span onclick="hideTip()" style="cursor: pointer;">x</span>
</div>
<div id="msg"></div>
</div>
</body>
</html>
但是只要点这个遮盖层 则 隐藏 遮盖层+弹出DIV