除了對整幅圖像設置超鏈接外，還可以將圖像划分為若干區域，這叫做"熱區"，每個區域可設置不同的超鏈接。此時，包含熱區的圖像可以稱為映射圖像。
要進行熱區設置，首先需要在圖像文件中設置映射圖像名，格式為：
<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軸向下為正。
【例】
<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>