javascript动态给图片添加热点
由于图片的热点一般都是写死在HTML源代码里面了，所以如果有多张独立的图片需要增加热点，而且需要根据条件显示或者隐藏其中的某些图片时，这样图片的位置就会发生变动，从而导致添加的热点对不上原图片的位置而导致失效或者乱套了。下面为1张图片拆分成4张进行热点操作。
前提条件：热点是规则的长方形或者正方形，不能是三角形或者菱形那种，如果是只能是大概弄了，没那么精确。
在上面那种情况下，要想动态添加热点使用map标签就很困难了。
解决办法：使用javascript来动态添加空链接a来实现。
布局结构：每张图添加一个容器，设置position为relative，图片有多少个热点就添加多少个a，设置a的position为absolute定位，这样每张图片形成单独的定位区域，然后通过将a浮动到图片需要设置热点的位置就完工了。
难点：找到绝对定位a链接的left，top和widht，height属性。其实这个也很简单，就是通过dreamware每次只单独设置一张图片的热点，根据生成的map标签找到left，top，width，height。如下面map标签其中的一个热点区域
<map name="Map" id="Map"><area shape="rect" coords="137,3,188,16" href="#" /></map>
那么此热点对应的a的left=137，top=3，width=188-137，height=16-3。
提醒：由于dreamware中body会有margin和padding，所以设置热点之前需要增加一个样式，去掉body的margin和padding
<style type="text/css">
body{margin:0px;padding:0px;}
</style>
下面为得到的通过a模拟的热点，至于用javascript生成就不用多少了吧，自己收集每张图片的left,width,top,height保存起来，然后javascript根据这些生成a链接。这样就不怕隐藏某张图片后导致热点错位或者失效了。
<style type="text/css">
body{margin:0px;padding:0px;}
.relative{position:relative;float:left}/*注意容器要设置为刚好和图片大小一致，所以推荐div+float来实现*/
.relative a{
position:absolute;
background:url(about:blank);/*增加这个防止IE下的空链接失效*/
/*由于只是一个示例，简单为主，高和宽定死了，实际应用时需要给HTML代码里面的a单独设置width/height属性*/
height:15px;
width:45px;
}
</style>
<div class="relative">
<img src="/imgblog/20121009/1649028793.jpg" border="0">
<a href="javascript:alert('加勒比')" style="left:137px;top:1px"></a>
<a href="javascript:alert('安圭拉')" style="left:178px;top:21px"></a>
<a href="javascript:alert('中美洲')" style="left:177px;top:50px"></a>
<a href="javascript:alert('南美洲')" style="left:180px;top:90px"></a>
</div>
<div class="relative">
<img src="/imgblog/20121009/1648550512.jpg" border="0"/>
<a href="javascript:alert('佛得角')" style="left:9px;top:22px"></a>
<a href="javascript:alert('非洲')" style="left:50px;top:38px"></a>
<a href="javascript:alert('中东')" style="left:115px;top:23px"></a>
<a href="javascript:alert('泰国')" style="left:170px;top:21px"></a>
<a href="javascript:alert('毛里求斯')" style="left:92px;top:72px"></a>
<a href="javascript:alert('大洋洲')" style="left:202px;top:74px"></a>
<a href="javascript:alert('澳大利亚')" style="left:204px;top:99px"></a>
</div>
<div class="relative">
<img src="/imgblog/20121009/1648463012.jpg" border="0" />
<a href="javascript:alert('北美洲')" style="left:110px;top:81px"></a>
</div>
<div class="relative">
<img src="/imgblog/20121009/1648376137.jpg" border="0" />
<a href="javascript:alert('英国')" style="left:16px;top:76px"></a>
<a href="javascript:alert('欧洲')" style="left:106px;top:64px"></a>
<a href="javascript:alert('葡萄牙')" style="left:15px;top:108px"></a>
<a href="javascript:alert('亚洲')" style="left:159px;top:108px"></a>
</div>
<div style="clear:both"><input type="button" value="随机隐藏一张图片，热点还是对的" onclick="hide()"/></div>
<script type="text/javascript">
var dvs=[];
function RND(min,max){if(max<min){var tmp=min;min=max;max=tmp;}return Math.floor(Math.random()*(max-min+1)+min);}
function hide(){var rnd=RND(0,dvs.length-1);for(var i=0,j=dvs.length;i<j;i++)dvs[i].style.display=rnd==i?'none':'block';}
window.onload=function(){var tdvs=document.getElementsByTagName('div');for(var i=0,j=tdvs.length;i<j;i++)if(tdvs[i].className=='relative')dvs[dvs.length]=tdvs[i];}
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：javascript动态给图片添加热点