今天刚做了一个html map 标记的DEMO,贴在此处方便以后使用
<!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" />
<title>map 使用</title>
<script>
function Show(divId){
var ID=document.getElementById(divId);
ID.style.visibility="visible";
}
</script>
<style type="text/css">
.showDiv{
padding-top:100px;
}
.one{
position:absolute;
width:auto;
z-index:1;
height:auto;
right:450px;
top:90px;
filter:alpha(opacity=80);
opacity:0.8;
visibility:hidden;
}
.two{position:absolute;
width:auto;
z-index:1;
height:auto;
left:430px;
top:130px;
filter:alpha(opacity=80);
opacity:0.8;
visibility:hidden;
}
.three{
position:absolute;
width:auto;
z-index:1;
height:auto;
right:450px;
top:380px;
filter:alpha(opacity=80);
opacity:0.8;
visibility:hidden;
}
</style>
</head>
<body>
<div style=" width:400px; height:500px; margin:0px auto">
<div id="oneDiv" class="one"><img src="images/001.gif" /></div>
<div id="twoDiv" class="two"><img src="images/002.gif" /></div>
<div id="threeDiv" class="three"><img src="images/003.gif" /></div>
<div class="showDiv">
<img src="../pic02.png" usemap="#aa" alt="aa" border="0" />
<map name="aa" id="aa">
<area shape="circle" coords="212,137,14" nohref="nohref" οnclick="Show('oneDiv')"/>
<area shape="circle" coords="173,180,14" nohref="nohref" οnclick="Show('twoDiv')"/>
<area shape="circle" coords="205,253,15" nohref="nohref" οnclick="Show('threeDiv')"/>
</map>
</div>
</div>
</body>
</html>