[精讚] [會員登入]
2047

[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] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

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

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

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

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

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串,把你的容器破壞得很難看...

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

我有話要說


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

訪客留言

[無留言]

隨機好文

如何在linux下執行java 原生的java應用程式可以使用簡單的方法在console下面寫出來,適合作簡單的應用

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

安裝git centos/freebsd/windows安裝git

Mysql INSERT ... ON DUPLICATE KEY UPDATE 寫法 Mysql有則修改,無則新增的sql寫法

桌機二更新開箱文 桌機二-低成本升級計畫不專業懶得打字開箱文