[精讚] [會員登入]
1359

[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

你可能感興趣的文章

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

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

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

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

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

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

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

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

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

我有話要說


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

訪客留言

[無留言]

隨機好文

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?

維修冰箱 維修冰箱

[CodeIgniter 3] 資料庫的使用方法整理2/2 CI3 承襲 CI2,有很多的builder class可以用,依各人的使用習慣,有人喜歡一堆sql字串,有人喜歡用helper

海棉寶寶超泡杯演奏的sweet victory 章魚哥和海棉寶寶在超泡杯的演奏歌曲