錨點鏈接
<a name="#d"></a>
<a href="#d">點擊</a>
圖像熱區鏈接
除了對整幅圖像設置超鏈接外，還可以將圖像划分為若干區域，這叫做"熱區"，每個區域可設置不同的超鏈接。此時，包含熱區的圖像可以稱為映射圖像。
要進行熱區設置，首先需要在圖像文件中設置映射圖像名，格式為：
<img src = 圖像文件地址 usemap = 映射圖像名稱>
也就是說，此時需要使用<img>標記的usemap屬性，定義圖像的映射圖像名。
然后，就要在圖像中定義各個熱區以及超鏈接了，主要語法為：
<map name = 映射圖像名稱>
<area shape = 熱區形狀1 coords = 熱區坐標1 href = 鏈接地址1>
<area shape = 熱區形狀2 coords = 熱區坐標2 href = 鏈接地址2>
……
<area shape = 熱區形狀n coords = 熱區坐標n href = 鏈接地址n>
</map>
在該語法中又引入了兩個標記：<map>和<area>。<map>、</map>標記用於包含多個<area>標記，其中的"映射圖像名稱"就是在<img>標記中定義的名稱。<area>標記則用於定義各個熱區和超鏈接，它有兩個重要屬性：
（1）shape屬性：用來定義熱區形狀，它有三個值：
● default：默認值，為整幅圖像。
● rect：矩形區域。
● circle：圓形區域。
● poly：多邊形區域。
（2）coords屬性：用來定義矩形、圓形或多邊形區域的坐標。它的格式如下：
● 如果shape = "rect"，則coords包含四個參數，分別為left、top、right和bottom，也可以將這四個參數看成矩形左上角和右下角頂點的坐標。
● 如果shape = "circle"，則coords包含三個參數，分別為center-x、center-y和radius，這三個參數是圓心坐標和圓的半徑。
● 如果shape = "poly"，則coords需要按順序取多邊形各個頂點的（x、y）坐標值，因此形式為"x1, y1, x2, y2, …… xn, yn"。可以是逆時針，也可以是順時針。HTML會按照定義頂點的順序將它們鏈接起來，形成多邊形熱區。
如果要定義的熱區形狀復雜，都可以用多邊形熱區來逼近，所以如果shape = "poly"，則coords可能包含很多坐標值，其數量必須是偶數。
圖像的左上角坐標是（0, 0），x軸向右、y軸向下為正。
【例7】修改例6，改為chap7_7.html，給圖像定義熱區並加超鏈接。
<html>
<head>
<title>itsway -- 圖像</title>
</head>
<body>
<center><img src = "taihu.gif" usemap = "taihu" border = "0"><center>
<map name = "taihu">
<area shape="rect" coords="223,20,241,38" href="chap7_7meiyuan.html" target="_blank" alt="梅園">
<area shape="circle" coords="234,53,7" href="chap7_7yuantouzhu.html" target="_blank" alt="黿頭渚">
<area shape="poly" coords = "226, 228, 243, 219, 256, 207, 271, 217, 275, 225, 265, 229, 265, 232, 255, 250, 244, 253, 227, 239" href="chap7_7piaomiaofeng.html" target="_blank" alt="縹緲峰">
</map>
</body>
</html>
在圖中請注意，當鼠標移到熱點區域時，鼠標會變成手的形狀，此時單擊鼠標，就會打開相應的網頁。“黿頭渚”念“原頭煮”，是無錫太湖的一處名勝，呵呵。
在chap7_7.html中鏈接了幾個網頁，它們可以簡單寫寫。例如，chap7_7meiyuan.html代碼如下。
<html>
<head>
<title>itsway -- 圖像</title>
</head>
<body>
<p> 無錫梅園橫山風景區南臨太湖，北倚龍山，成為集自然景觀、人文古跡、名花異卉、園林建築及休閑健身於一體的著名旅游勝地。"四面有山皆入畫，一年無日不看花"。</p>
</body>
</html>
chap7_7yuantouzhu.html代碼如下：
<html>
<head>
<title>itsway -- 圖像</title>
</head>
<body>
<p> 黿頭渚是無錫第一勝景、太湖佳絕處，獨占太湖風景最美一角，山清水秀。郭沫若吟道："太湖佳絕處，畢竟在黿頭"。黿頭渚的特點是以太湖風景為主，人工修飾為輔，依山傍湖，別具情趣，是觀賞太湖的理想所在。</p>
</body>
</html>
chap7_7piaomiaofeng.html代碼如下：
<html>
<head>
<title>itsway -- 圖像</title>
</head>
<body>
<p> 太湖西山縹緲峰，海拔337米，為太湖七十二峰之首，水的精華所在。太湖風雲多變，山峰常隱於雲霧之中，縹縹緲緲，似仙山隔雲海，如霞嶺玉帶連，有"縹緲晴巒"景觀，為西山八大勝景之一。</p>
</body>
</html>
===============
area中有重要的幾個屬性：
coords 這個是要選中的地區里面有圓、矩形、多邊形
href 跳轉的地址、錨點
tip：可以通過DW中有熱點選擇的功能，還算方便，省去了坐標的問題
===============map熱區自適應圖片大小
https://blog.csdn.net/qq_41226196/article/details/109218971 參照地址
<script src="jquery.imgMap.min.js"></script>
<p>
<img src="tupian.jpg" style="width:100%" alt="" usemap="#map1"/>
<map name="map1">
<area shape="rect" coords="38, 31, 269, 226" href="https://www.v2ex.com/t/194813"/> </map>
</p>
<script>$(document).ready(function(e) { $('img[usemap]').rwdImageMaps();});</script>
下面附上jquery.imgMap.min.js:
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
dw 下載