把图片里的小图片抠出，添加链接或事件
<!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; 100%; height: 100%; background-color: black; opacity: 0.7; z-index: 100; display: none; } #img_box { position: fixed; top: 1%; left: 10%; 80%; height: 98%; z-index: 101; display: none; } #close { position: absolute; top: 10px; right: 10px; 40px; } #append { display: block; margin: 0 auto; } </style> </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> <script type="text/javascript"> var newmap = document.createElement("map"); newmap.setAttribute("id", "myMap"); newmap.setAttribute("name", "myMap"); document.getElementById("box").appendChild(newmap); var newarea = document.createElement("area");
newarea.setAttribute("href","链接地址"); newarea.setAttribute("shape", "poly");
//多边形（右上为第一个点，右下为第二个点，左下为第三个点，左上为第四个点），
//circle：圆形（圆心坐标[即圆心距离左上角的距离]X,Y，圆的半径R），rect：长方形（距离左上角的距离X，Y，长宽：W,H） newarea.setAttribute("coords", "53,413,71,970,0,998,0,376"); document.getElementById("myMap").appendChild(newarea); var newarea1 = document.createElement("area"); newarea1.setAttribute("shape", "poly"); //620, 70, 620, 430, 490, 380, 490, 160 newarea1.setAttribute("coords", "1577,148,1576,1101,1235,976,1240,396"); document.getElementById("myMap").appendChild(newarea1); var map = document.getElementById("myMap"); var close = document.getElementById("close"); map.onclick = function () { 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("img").src; document.getElementById("append").setAttribute("src", src); var h1 = document.getElementById("append").style.height; document.getElementById("append").style.marginTop = (h - h1) / 2; } close.onclick = function () { document.getElementById("append").setAttribute("src", ""); document.getElementById("zhezhao").style.display = "none"; document.getElementById("img_box").style.display = "none"; }; </script> </body> </html>