使用說明:影像地圖

出自淡水維基館
跳轉到: 導覽搜尋
  • 我們在瀏覽網站的時候,會看見一些圖片或者圖示在滑鼠移過去的時候會顯示文字,而且點下去可以連到相關的頁面、網站,或者作者想指引使用者看的網站頁面等,
    這個就是「影像地圖」的功用。

影像地圖(Imagemap)[編輯]

  • 讓圖片加上連結:
  • 透過圖片等影像連結到館內其他頁面或者外部的網址。
  • 以圖代文的視覺化顯示連結方式。

語法介紹[編輯]

<imagemap>
  • ↑ 影像地圖起始標籤
Image:檔名|圖片大小|alt=Alt text
  • ↑ 選擇使用的圖片及設定
default
  • ↑ 使用預設連結方式(單一點連結)
 [[連結之頁面|替代形容文字]] (內部頁面連結)
     或
 [欲連結網址] (外部網址連結)
  • ↑ 連結到指定的頁面或者外部網址,設定滑鼠移過顯示之替代文字
desc none
  • ↑ 消除“ i ” (關於這幅圖片)圖示
</imagemap>
  • ↑ 影像地圖結束標籤

使用範例[編輯]

範例一(基本)[編輯]

  • 語法內容
<imagemap>
Image:2012-淡水紅毛城2.jpg|115px|alt=Alt text
default [[紅毛城]]
desc none
</imagemap>
  • 顯示畫面 (把滑鼠移到圖片上看看吧~!)
Alt text



範例二(替代文字)[編輯]

  • 加上替代文字(滑鼠移到圖片上會顯示的文字)
  • 語法內容
<imagemap>
Image:2012-淡水紅毛城2.jpg|278px|alt=Alt text
default [[紅毛城|淡水的紅毛城~~]]
desc none
</imagemap>
  • 顯示畫面 (把滑鼠移到圖片上看看吧~!)
Alt text



範例三(外部網址)[編輯]

  • 連到外部的網址
  • 語法內容
<imagemap>
Image:2012-淡水紅毛城2.jpg|250px||alt=Alt text
default [http://taiwan.net.tw/m1.aspx?sNo=0001091&id=2129 交通部觀光局-觀光景點-淡水紅毛城]
desc none
</imagemap>
  • 顯示畫面 (把滑鼠移到圖片上看看吧~!)
Alt text


關於這幅圖片(Image description link)[編輯]

  • 影像描述連結:用以連結所使用圖片的來源和檔案資訊。
  • 通常位置在圖片右下角,以藍色圓型圖底的”i”表示,滑鼠移置藍色圖示上會顯示「關於這幅圖片」。
  • 可以自己選擇要不要隱藏這個圖示。


隱藏「關於這幅圖片」藍色圖示[編輯]

  • 隱藏語法: desc none
隱藏圖片說明前 隱藏圖片說明後
語法內容
<imagemap>
Image:2012-淡水紅毛城2.jpg|115px|alt=Alt text
default [[淡水紅毛城]]
</imagemap>
<imagemap>
Image:2012-淡水紅毛城2.jpg|115px|alt=Alt text
default [[淡水紅毛城]]
desc none
</imagemap>
顯示畫面
Alt text
關於這幅圖片
右下角有藍色圖示"i"
Alt text
藍色圖示不見了~

回上端