多张图片热点如何添加
由于图片的热点一般都是写死在HTML源代码里面了，所以如果有多张独立的图片需要增加热点，而且需要根据条件显示或者隐藏其中的某些图片时，这样图 片的位置就会发生变动，从而导致添加的热点对不上原图片的位置而导致失效或者乱套了。下面为1张图片拆分成4张进行热点操作。
实现要点：图片要有position为relative的容器，添加的热点就会变成相对于容器的坐标了，这样隐藏图片也不会导致图片热点消失错位。
测试代码如下
<style type="text/css">
body{margin:0px;padding:0px;}
.relative{position:relative;float:left}/*注意容器要设置为刚好和图片大小一致，所以推荐div+float来实现*/
</style>
<div class="relative">
<img src="/imgblog/20121009/1649028793.jpg" border="0" usemap="#Map3">
<map name="Map3" id="Map3"><area shape="rect" coords="138,3,187,16" href="javascript:alert('加勒比')" /><area shape="rect" coords="182,18,220,30" href="javascript:alert('安圭拉')" /><area shape="rect" coords="183,50,215,66" href="javascript:alert('中美洲')" /><area shape="rect" coords="182,89,222,102" href="javascript:alert('南美洲')" /></map>
</div>
<div class="relative">
<img src="/imgblog/20121009/1648463012.jpg" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="109,81,153,94" href="javascript:alert('北美洲')" /></map>
</div>
<div class="relative">
<img src="/imgblog/20121009/1648376137.jpg" border="0" usemap="#Map2" />
<map name="Map2" id="Map2"><area shape="rect" coords="15,75,45,87" href="javascript:alert('英国')" /><area shape="rect" coords="108,62,144,80" href="javascript:alert('欧洲')" /><area shape="rect" coords="15,104,53,117" href="javascript:alert('葡萄牙')" /><area shape="rect" coords="160,106,189,119" href="javascript:alert('亚洲')" /></map>
</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>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：多张图片热点如何添加