本文介绍两种使用JavaScript动态创建带有热点区域的图片的方法。一种是通过innerHTML直接设置热点区域，另一种是在HTML中预定义map标签并通过JavaScript关联图片。这两种方法均可实现图片上不同区域点击跳转至不同链接的功能。
方法1:利用innerHTML
function fName(){
var mainDiv=document.getElementById("mainDiv");
var img=document.createElement("img");
img.src="1.jpg";
var map=document.createElement("map");
map.id="Map";
map.name="Map";
map.innerHTML="<area shape='rect' coords='40,40,80,60' href='www.google.com'/>";
mainDiv.appendChild(map);
img.useMap="#Map";
mainDiv.appendChild(img);
}
方法2:
先把map标签写好在html里,如:
<html>
<body>
<map id="Map" name="Map">
<area shape="rect" coords="40,40,80,60" href="www.google.com" />
</map>
</body>
</html>
function fName(){
var mainDiv=document.getElementById("mainDiv");
var img=document.createElement("img");
img.src="1.jpg";
img.useMap="#Map";
mainDiv.appendChild(img);
}
扫一扫
4万+
到【灌水乐园】发言
