Lesson01_08 圖像地圖_基礎教學

1、圖片超連結：
格式為：

#

2、圖像地圖是什麼？
把一個圖分成多個區域，每個區域指向不同的URL位址

3、怎樣產生圖像地圖
(1)先要定義出圖像的各熱點區域的形狀、位置座標、及其指向的url位址訊息，這個過程叫做圖像熱點映射。
這個過程要用標籤來說明，其中的name屬性為這個熱點映射指定了一個名稱。
(2)影像熱點中映射中的各個區域以標籤說明，標籤的格式為:
映像標籤中增加一個名為usemap的屬性設定,如下：

範例：程式碼如下：

<map name=mymap>
<area shape="rect" coords="0,0,50,50" href="http://www.loncer.cn">
<area shape="rect" coords="0,50,150,50" href="http://www.thinkme.cn">
<area shape="rect" coords="50,0,100,50" href="http://www.sina.cn">
</map>
<img src="/upload/200729134227624.gif" usemap="#mymap">

效果如下：

shape屬性的設定說明：

rect定義一個矩形區域，coords屬性設定為矩形的左上角，右下角的座標，各個座標值用，號碼分開；

poly定義一個多邊形的區域，coords屬性設定值為多邊形各頂點的座標值；

cicle定義一個圓形區域，coords屬性設定值為圓形座標及半徑，前兩個為座標，後一個為半徑。

 

範例：程式碼如下： 效果如下： 範例：程式碼如下： 效果如下： 例：程式碼如下： 效果如下： 例：程式碼如下： 效果如下： 例：程式碼如下： 效果如下： 例：程式碼如下： 效果如下： 例：程式碼如下： 效果如下：