首頁 > web前端 > css教學 > Lesson01_08 圖像地圖_基礎教學

Lesson01_08 圖像地圖_基礎教學

WBOY
發布: 2016-05-16 12:08:54
原創
1294 人瀏覽過

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屬性設定值為圓形座標及半徑,前兩個為座標,後一個為半徑。

     

    範例:程式碼如下: 效果如下: 範例:程式碼如下: 效果如下: 例:程式碼如下: 效果如下: 例:程式碼如下: 效果如下: 例:程式碼如下: 效果如下: 例:程式碼如下: 效果如下: 例:程式碼如下: 效果如下:
  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板