[精讚] [會員登入]
1835

[HTML] 影像地圖

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

此文完整連結 http://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

你可能感興趣的文章

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

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

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

[HTLM5] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

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

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

CSS 的 !important 意義 網頁的前端工程師非常頭痛的事,就是同時要處理 IE和 FF等不同的瀏覽器,更糟的是 IE 又分成了 6 7 8三種版本,

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

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

[Win7] 燒錄 iso 檔 在Windows7 中內建燒錄程式,可以直接把檔案拉到光碟機裡,再執行燒錄。

維修冰箱 維修冰箱

好用的3+2碼郵遞區號查詢系統推薦 網路上找到用地址輸入判斷3+2碼郵遞區號的辨識率不高,除了這個網站…

詭異的創業思維 創業的思維中,有多少銀彈,有多少技術,有多少人脈,有多少時間等等,每個都要考慮進去,以熱忱建立的關係脆弱的像蘇打餅乾一樣..