<img src="./img/pgy.jpg" alt="圖片" usemap="#pgy">
<map id="pgy" name="pgy">
<area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
<area shape="circle" coords="200,50,50" href="#circle" alt="圓形">
<area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多邊形">
</map>
/*上圖展示了圖片的映射，可通過tab鍵查看映射區域*/
<area>標簽一般情況下用的都比較少，他主要是在圖像上面划分某塊區域，然后不同區域有不同的操作。多數情況下相當於半個<a>標簽。
<img>中的usemap屬性是和 <map>中的id 或者 name 關聯的，不同瀏覽器關聯的屬性不同，所以通常都把兩個都寫上。
<area>標簽是嵌套在<map>標簽下的。
<area>中的shape屬性，表示映射區域的形狀:
rect ：矩形；
circle：圓形；
poly：多邊形；
<area>中的 coords 代表 位置與坐標
<area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
矩形的coords有四個值，分別代表 "左上角距離左邊的位置,右上角距離頂部的位置，寬度,高度"；
<area shape="circle" coords="200,50,50" href="#circle" alt="圓形">
矩形的coords有三個值，分別代表 "圓心點距離左邊的位置,圓心點距離頂部的位置，半徑"；
<area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多邊形">
多邊形的coords有多個值，每兩個值就確定一個坐標點，然后依次連接成多邊形，每個坐標都是 "左邊距離，上邊距離"，以此確定坐標點。最后會自動閉合連接，形成一個多邊形。