[精讚] [會員登入]
2613

[HTML] 影像地圖

使用HTML的MAP標籤製作影像地圖

分享此文連結 //n.sfs.tw/10956

分享連結 [HTML] 影像地圖@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 04:14:45 最後編修
2017-04-05 11:02:45 By 張○○
 

自動目錄

影像地圖就是在圖片上設定一塊區域,然後讓訪客可以直接點擊圖片上的區塊進到設定好的連結,這個區域可以是長方形、圖形或多邊形。如果不用這個功能,你可能得在圖片上放一些看不見的浮動區塊或多個圖片組合達到這個效果,會麻煩很多。

1 先設定一張圖片

<img src="your_img.jpg" usemap="#my_map1"> 

這張圖最好設定原比例,不要縮放,因為圖片縮放座標並不會跟著縮放,會造成移位。

2 設定影像地圖的區塊,例如

  長方形  rect 就兩個座標 x1,y1,x2,y2

  圓形 circle 為一個圓心和半徑 x1,x2,r

  多邊形 polygon 為多個座標組成,最少3個點,少於3個點沒有作用 x1,y1,x2,y2,x3,y3,x4,y4,...

<map name="my_map1">
 <area shape="rect" coords="396,72,524,268" href="link.php" />
 <area shape="circle" coords="100,390,40" href="link2.php">
 <area shape="polygon" coords="0,284,393,385,299,0" href="link3.php">
</map>

注意

  • usemap的屬性中要多加一個"#",指定的是 map標籤中的 name而不是id,可以說這是早期HTML標準中的活化石。
  • 如果圖片有指定寬高時,area上的 coords不會受到影響,所以會跑位
  • 超出圖片大小外的部分沒有作用
  • 座標不完整該座標失效,例如少一個y座標
  • 多邊形若有對折或交叉,以有包圍到的為準,所以也可以用這個方法設定蝴蝶結形。

參考資料

[1] http://www.study-area.org/coobila/tutorial_289.html


原文編修 2009-01-25 00:18:41

END

你可能感興趣的文章

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

網頁自動轉址的四種方法 設定網頁自動轉址的四種方法,三種html,一種php

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

沒有非誰做不可的事,也沒有不可被取代的人 沒有非誰做不可的事,也沒有不可被取代的人

[Windows7] 移除IE10及移除IE11 Windows7 不得已的情況要移除IE11或IE10怎麼做?

Smarty安裝 smarty 是著名的樣版引擎,非常的好用,用多了突然發現拿掉smarty反而不會寫php了,以下是安裝過程..

[PHP] 檢查檔案是否是圖檔 使用getimagesize函數檢查檔案是否是圖檔