[ASP.NET] 圖片劃分出不同超連結的區塊

在整理在圖片上自訂文字位置的文章時，突然想到要如何在圖片上劃分區塊以超連結到不同的地方，原本以為也類似用 div 的絕對位置 (position:absolute) 來實現，沒想到更簡單，HTML 就有內建分割的 tag了，叫做 <map> 和 <area>，實作方法如下：

<table>
 <tr>
      <td bgcolor="#FFFFFF">    
           <img alt="map" usemap="#map1" src="mapbg.jpg" width="633" height="336" />

           <map name="map1" >
                <!--不規則形-->
                <area shape="poly" coords="118,103,138,159,227,158,276,109,229,44,174,90" href="http://www.google.com"/>
                <!--圓形-->
                <area shape="circle" coords="266,167,30" href="http://tw.yahoo.com" />
                <!--四方形-->
                <area shape="rect" coords="287,205,334,234" href="http://www.baidu.com" />
           </map>
      </td>
 </tr>
</table>

首先，先指定 <img> 的屬性 usemap 到 <map>，然後在 <map> 裡再用 <area> 來開始劃分超連結區域就好了。

劃分的方法分為不規則形(poly)、圓形(circle)、四方形(rect)，再用坐標的方式定義出區域，如何得到坐標可參考這篇文章，以上面的例子簡單說明如下：

不規則形：
也就是多邊形，以定義多個 (X,Y) 坐標來劃分出區域，例如 (118,103)、(138,159)、(227,158)、(276,109)、(229,44)、(174,90)。

圖形：
區域定義方式是先決定圖心的坐標，再決定半徑，例如圓心 (266,167)，半徑 30。

四方形：
用兩個點的坐標來決定四方形，分別用左上和右下的點坐標，例如左上點坐標 (287,205)、右下點坐標 (334,234)。



參考來源：w3cschool