@給圖片指定區域加熱點？即給一張圖片上的幾個指定區域加上熱點。
一，添加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，手動去設置好熱點區域，然后根據區域計算出公式添加到代碼中就可以了。