[精讚] [會員登入]
1891

[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] 表單color、email、url、search、tel輸入類型 介紹HTML5好用的輸入類型:color、email、url,以及兩個形同雞肋的類型search、tel..

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

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

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

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

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

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

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

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

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

我有話要說


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

訪客留言

[無留言]

隨機好文

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

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

Linux shell 的date表示法 linux下SHELL中的date表示法

UTF8中文字/全形一覽 快速查詢urf-8的中文字,共計13246中文字(5401常用字+7652罕用字+日文或編號),292全形符號,27半形符號。

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