<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#zhezhao {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
z-index: 100;
display: none;
}
#img_box {
position: fixed;
top: 1%;
left: 10%;
width: 80%;
height: 98%;
z-index: 101;
display: none;
}
#close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
}
#append {
display: block;
margin: 0 auto;
}
</style>
<script type="text/javascript">
window.onload = function () {
//动态创建map与子级area
create("myMap", "myMap1", "myMap2", "img", "53,413,71,970,0,998,0,376", "1577,148,1576,1101,1235,976,1240,396");
function create(id, idarea1, idarea2, idimg, c1, c2) {
var newmap = document.createElement("map");
newmap.setAttribute("id", id);
newmap.setAttribute("name", id);
document.getElementById("box").appendChild(newmap);
var newarea = document.createElement("area");
newarea.setAttribute("id", idarea1);
newarea.setAttribute("shape", "poly");
newarea.setAttribute("coords", c1);
newarea.setAttribute("onclick", "areaclick('" + idimg + "');");
document.getElementById("myMap").appendChild(newarea);
var newarea1 = document.createElement("area");
newarea1.setAttribute("id", idarea2);
newarea1.setAttribute("shape", "poly"); //620, 70, 620, 430, 490, 380, 490, 160
newarea1.setAttribute("coords", c2);
newarea1.setAttribute("onclick", "areaclick('" + idimg + "');");
document.getElementById("myMap").appendChild(newarea1);
}
document.getElementById("close").onclick = function () {
document.getElementById("append").setAttribute("src", "");
document.getElementById("zhezhao").style.display = "none";
document.getElementById("img_box").style.display = "none";
}
}
function areaclick(idimg) {
document.getElementById("zhezhao").style.display = "block";
document.getElementById("img_box").style.display = "block";
var h = document.getElementById("img_box").offsetHeight;
var w = document.getElementById("img_box").offsetWidth;
document.getElementById("append").style.maxWidth = w + "px";
document.getElementById("append").style.maxHeight = h + "px";
var src = document.getElementById(idimg).src;
document.getElementById("append").setAttribute("src", src);
var h1 = document.getElementById("append").style.height;
document.getElementById("append").style.marginTop = (h - h1) / 2;
}
</script>
</head>
<body>
<div id="box">
<img src="images/back3.jpg" border="0" usemap="#myMap" alt="Planets" id="img" />
</div>
<div id="zhezhao"></div>
<div id="img_box">
<img id="close" src="images/wtg.png" />
<img id="append" src="" />
</div>
</body>
</html>
