javascript动态给图片添加热点

  由于图片的热点一般都是写死在HTML源代码里面了,所以如果有多张独立的图片需要增加热点,而且需要根据条件显示或者隐藏其中的某些图片时,这样图片的位置就会发生变动,从而导致添加的热点对不上原图片的位置而导致失效或者乱套了。下面为1张图片拆分成4张进行热点操作。

javascript动态给图片添加热点javascript动态给图片添加热点javascript动态给图片添加热点javascript动态给图片添加热点

  前提条件:热点是规则的长方形或者正方形,不能是三角形或者菱形那种,如果是只能是大概弄了,没那么精确。

  在上面那种情况下,要想动态添加热点使用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动态给图片添加热点

评论(0)Web开发网
阅读(604)喜欢(0)HTML/CSS兼容/XML