@给图片指定区域加热点？即给一张图片上的几个指定区域加上热点。
一，添加map标签，一个map对应多个热点，然后在图片中添加usemap属性。
---京东测试地址：http://sale.jd.com/act/gY7p5IDzUace42.html?cpdad=1DLSUE
---教程地址，http://www.w3school.com.cn/tags/tag_map.asp
---一个图片对应一个map标签就可以了，因为map标签内可以添加多个热点区域，在area中设置href链接地址。
<img src="images/body.jpg" hidefocus="true" usemap="#download" alt="1900x2249" class="img-responsive" data-src="holder.js/1900x2249" data-holder-rendered="true" /> //hidefocus="true"必须加上，不然ie浏览器下会显示虚线框
<map name="download">
<area style="outline:none;" shape="rect" coords="483,851,1233,1217" href="http://item.jd.com/767255.html?cpdad=1DLSUE" target="_blank" clstag="sale|keycount|8792333|6">
<area style="outline:none;" shape="rect" coords="483,851,1233,1217" href="http://item.jd.com/767255.html?cpdad=1DLSUE" target="_blank" clstag="sale|keycount|8792333|6">
...
</map>
---热点位置设置问题，coords="483,851,1233,1217"的设置？
483表示left的距离，483到1233表示宽度。
851表示top的距离，851到1217表示高度。
***注意，left和top的距离是相对img的父元素的。因为分辨率导致热点区域偏离问题？1可以固定好父元素位置。2可以使用jquery计算出coords的值。
---Jquery设置热点coords属性：
<script type="text/javascript">
$(document).ready(function(){
var window_width=$(window).width(); //获得浏览器宽度
var window_height=$("#3F").height(); //获得父元素高度
var window_height=$("#header-img").height(); //获得热点图片高度
var coords=Math.ceil(window_width*0.55)+","+Math.ceil(window_height*0.313)+","+(Math.ceil(window_width*0.55)+Math.ceil(window_width*0.33))+","+(Math.ceil(window_height*0.313)+Math.ceil(window_height*0.27)); //根据一个实 例，计算出left和top距离的百分比，浏览器宽度和父元素高度乘以百分比，即能解决偏离问题。用相对定位和百分比计算距离是解决标签偏离问题的最好办法。
$("#jidan").attr("coords",coords); //设置area属性。
});
---热点兼容性问题？
在旧的浏览器显示热点边框问题，在img中添加hidefocus="true",在area中添加onfocus="blur(this);"和"outline:none;"。
注意：必须在area标签中添加 style="outline:none;" 样式，否则360浏览器下会显示虚线框。
二， 添加div标签，外边是a标签，设置div标签大小和热点区域大小一样，然后设置div标签位置（使用position:absolute;即可）和热点区域重叠即可。
<div class="zhuce" style="width:80px;height:30px;position:absolute;top:567px;"></div>
</a>
var window_width=$(window).width();
var coords=Math.ceil((window_width-1423)/2)+470;
$(".zhuce").css("left",coords+"px");
</script>
三，添加a标签相对定位法。
---相对map标签开发效率更快。
---html代码（必须代码，div标签areas和a标签以及相对定位样式。）
//注意，这里div标签areas和a标签是必须的，areas标签设置范围，即在任何电脑，任何分辨率下，它的宽度是固定不变的1000px，而且居中显示。而且背景图片高度是不会变化的，a标签相对定位的父对象是areas，areas不变的话，a标签的位置也不会变。（在任何电脑，任何分辨率下。）
<div class="content">
<div class="areas">
<a href="http://www.hhncpw.com/item/0000002444.html" target="_blank" id="caomei" style="display:block;width:187px;height:45px;position:relative;left:649px;top:473px;"></a>
<a href="http://www.hhncpw.com/item/0000002445.html" target="_blank" id="jidan" style="display:block;width:192px;height:45px;position:relative;left:30px;top:790px;"></a>
<a href="http://www.hhncpw.com/item/0000002443.html" target="_blank" id="huanggua" style="display:block;width:155px;height:45px;position:relative;left:695px;top:1099px;"></a>
</div>
</div>
---css代码
.areas{
width:1000px;
min-width:1000px;
margin:0 auto;
}
.content{
background: rgba(0, 0, 0, 0) url("http://www.hhncpw.com/static/yingtao/images/content.jpg") no-repeat scroll center top / cover ;
height:1322px;
min-width:1000px;
}
@重点总结：
1，设置热点的最好最快捷的办法，还是用a标签，其次才是map加热点，所以能用a标签，就别用map。
2，用map设置热点，要多测试，主要是不同分辨率下多测试，利用正确的算法公式得到稳定兼容的热点区域覆盖。
---首先coords坐标相对对象（即计算的相对对象，一般是父元素或者自己，例如一张大的图片，一般就选择自己的高度和宽度作为计算标准。因为在不同分辨率下，图片显示的大小不同。）一定要明确，才能计算好。最简单的公式就是百分比计算，下边的公式相对更复杂，但实用。
var cut_width=Math.ceil((1920-window_width)/2); //获得banner图切掉部分一边的宽度。下边坐标的设置有需要。
var coords=Math.ceil((window_width-1000)/2+cut_width+765)+","+Math.ceil(window_height*0.590)+","+Math.ceil((window_width-1000)/2+cut_width+995)+","+(Math.ceil(window_height*0.590)+Math.ceil(window_height*0.212));
---其次coords坐标计算公式要设置正确，否则不同分辨率下就会出问题。
---再次声明，选择热点坐标计算标准的相对对象很重要，在不同分辨率下过关，证明相对对象选择正确了，反之错误。
3，如何快速的添加热点？
先在浏览器中添加，而不是在代码中先添加，例如利用火狐的firebug，手动去设置好热点区域，然后根据区域计算出公式添加到代码中就可以了。