像素地图中使用H5area追加热源锚点

今天做定位系统，对于固定锚点，发现使用H5area真的是挺方便

一、img设定成usemap

<img src="./images/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" onmousewheel="bigimg(this)">
<map name="planetmap">
  <area id="Mercury" shape="circle" coords="90,58,8" target="_blank" alt="Mercury" title="Mercury" href="./images/merglobe.gif">
  <area id="Venus" shape="circle" coords="124,58,8" target="_blank" alt="Venus" title="Venus" href="./images/venglobe.gif">
</map>

二、鼠标滚动时，地图可以自动缩放

<script type="text/javascript">
function bigimg(obj) {

    //obj是一个对象，初始时obj并没有zoom属性，所以给zoom赋值为100；
    var zoom = parseInt(obj.style.zoom) || 100;
    //每次滚动鼠标时，改变zoom的大小
    //event.wheelDelta有两个值，120，-120，取值情况取决于滚动鼠标的方向；
    zoom += event.wheelDelta/12;//每次滚动加减10；
    if (zoom > 0) {
        obj.style.zoom = zoom+"%";//更改后的zoom赋值给obj
    }
    return false;
}
</script> 

三、鼠标滑过时，可以弹出提示框
追加弹框样式

<style type="text/css">
.mapDiv { width:140px; height:61px; padding: 5px; color:#369; background: url('//files.jb51.net/file_images/article/201508/201587110632401.gif') no-repeat; position:absolute; display: none; word-break:break-all; }
</style>

追加鼠标滑过时的js事件

<script type="text/javascript">
	$(document).ready(function(){
		$("area").each(function(){
			var $x=-70;
			var $y=-80; 
			var name=$(this).attr("alt"); 
			$(this).mouseover(function(e){
				var index_num=$(this).index();
				var dom="<div class='mapDiv'><p><span class='name'></span></p></div>";
				$("body").append(dom);
				$(".name").text(name);
				$(".num").text(index_num)
				$(".mapDiv").css({
					top: (e.pageY + $y)+"px",
					left: (e.pageX + $x)+"px"
				}).show("fast");
			}).mouseout(function(){    
				$(".mapDiv").remove();
			}).mousemove(function(e){
				$(".mapDiv").css({
					top: (e.pageY + $y)+"px",
					left: (e.pageX + $x)+"px"
				})
			});
			
		});   
	})
</script>

由于h5area热点无法给area追加样式，所以样式只能通过图片来实现。如果想让锚点有更多的样式，建议用JQuery动态创建元素实现。