<!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>