2. 程式人生 > >HTML圖片熱區map area的用法

HTML圖片熱區map area的用法

阿新 • • 發佈：2018-07-27
矩形 中間 簡單 結束 tags rectangle ron lang 因此

<area>標記主要用於圖像地圖，通過該標記可以在圖像地圖中設定作用區域（又稱為熱點），這樣當用戶的鼠標移到指定的作用區域點擊時，會自動鏈接到預先設定好的頁面。其基本語法結構如下：

技術分享圖片 
     <area 
     class=type 
     id＝Value  
     href＝url  
     alt＝text  
     shape＝area-shape  
     coods＝value>
技術分享圖片

shape和coords：是兩個主要的參數，用於設定熱點的形狀和大小。其基本用法如下：

  • <area shape="rect" coords="x1, y1,x2,y2" href=url>表示設定熱點的形狀為矩形，左上角頂點坐標為（X1,y1），右下角頂點坐標為（X2,y2）。
  • <area shape="circle" coords="x1, y1,r" href=url>表示設定熱點的形狀為圓形，圓心坐標為（X1,y1），半徑為r。
  • <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設定熱點的形狀為多邊形，各頂點坐標依次為（X1,y1）、（X2,y2）、（x3,y3） ......。

<area>標記是在圖像地圖中劃分作用區域的，因此其劃分的作用區域必須在圖像地圖的區域內，所以在用 <area> 標記劃分區域前必須用HTML的另一個標記<map>來設定圖像地圖的作用區域，並為指定的圖像地圖設定名稱，該標記的用法很簡單，即<map name="圖像地圖名稱"> ...... </map>。

HTML <area> 標簽格式：
<map><area /></map>


(這個標簽的作用就是在一張圖片中的某一特定位置定義一個(或多個)熱點可進行超鏈接)
手動添加一個熱點：選中一個圖片/屬性/選擇一種形狀如：矩形、圓形、多邊形等。
定義和用法
<area> 標簽定義圖像映射中的區域（註：圖像映射指得是帶有可點擊區域的圖像）。
area 元素總是嵌套在 <map> 標簽中。
註釋：<img> 標簽中的 usemap 屬性與 map 元素 name 屬性相關聯，創建圖像與映射之間的聯系。

【實例】：

帶有可點擊區域的圖像映射：
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
HTML 與 XHTML 之間的差異
在 HTML 中，<area> 沒有結束標簽。
在 XHTML 中，<area> 必須正確地關閉。

提示和註釋：
註釋：<img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（由瀏覽器決定），所以我們需要同時向 <map> 添加 id 和 name 兩個屬性

技術分享圖片
標準屬性
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
如需完整的描述，請訪問標準屬性。

事件屬性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur
如需完整的描述，請訪問事件屬性
創建圖像映射 本例顯示如何創建帶有可供點擊區域的圖像映射。其中的每個區域都是一個超級鏈接。
HTML <area> 標簽的 coords 屬性

定義和用法
coords 屬性規定區域的 x 和 y 坐標，(該坐標是相對圖片的坐標，即圖像左上角的坐標是 "0,0")。
coords 屬性與 shape 屬性配合使用，來規定區域的尺寸、形狀和位置。

詳細解釋：
<area> 標簽的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。坐標的數字及其含義取決於 shape 屬性中決定的區域形狀。可以將客戶端圖像映射中的超鏈接區域定義為矩形、圓形或多邊形等。
下面列出了每種形狀的適當值：
圓形：shape="circle"，coords="x,y,z"
這裏的 x 和 y 定義了圓心的位置（"0,0" 是圖像左上角的坐標），r 是以像素為單位的圓形半徑。

多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一對 "x,y" 坐標都定義了多邊形的一個頂點（"0,0" 是圖像左上角的坐標）。定義三角形至少需要三組坐標；高緯多邊形則需要更多數量的頂點。
多邊形會自動封閉，因此在列表的結尾不需要重復第一個坐標來閉合整個區域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一個坐標是熱點矩形區域的一個角(左上角)的頂點坐標，另一個坐標是熱點矩形區域的對角(右下角)的坐標，"0,0" 是圖像左上角的坐標。請註意，定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。
例如，下面的 XHTML 片段在一個 100x100 像素圖像的右下方四分之一處，定義了一個對鼠標敏感的區域，並在圖像的正中間定義了一個圓形區域。
<map name="map">
<area shape="rect" coords="75,75,99,99" nohref="nohref">
<area shape="circ" coords="50,50,25" nohref="nohref">
</map>
【實例】：
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
<area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>
提示和註釋
註釋：如果某個 area 標簽中的坐標和其他區域發生了重疊，會優先采用最先出現的 area 標簽。瀏覽器會忽略超過圖像邊界範圍之外的坐標。

【實際應用】

HTML 圖像地圖

什麽是圖像地圖?

把一幅圖像分成多個區域，每個區域指向不同的URL地址。例如，將一幅中國地圖的圖像按照省市劃分為若幹個區域，這些區域就被稱為熱點，單擊熱點區域，就可以連接到與相應的省市有關的頁面，這就是圖像地圖。

怎麽制作?

  1. 首先必須定義出圖像上的各個熱點區域的形狀，位置坐標，及其指向的URL地址等信息，這個過程叫圖像熱點映射。圖像熱點映射需要使用<map name=mapname></map>標簽對進行說明，其中的name屬性為該圖像熱點映射指定了一個名稱。
  2. 圖像熱點映射中的各個區域用<area>標簽說明，<area>標簽的格式為：<area shape="形狀" coords="坐標" href="URL">，href部分也可以用nohref替換，表示在該區域單擊鼠標無效。<area>標簽還可以有一個target屬性，用來指明瀏覽器在哪個窗口或者幀中顯示href屬性所指向的網頁資源。
  3. 定義好了圖像熱點之後，接著就要在<img> 圖像標簽中增加一個名為usemap的屬性設置，usemap屬性指定該圖像被用作圖像地圖，其設置值為所使用的圖像熱點映射名稱，格式為：在<map>標簽中的name屬性設置值前多加一個"#"字符。例如，<img src="china.jpg" usemap="#mymap">

示例代碼

CODE:

<img src="china.gif" usemap="#mymap">
map name="mymap">
     <area shape="rect" href="a.html" coords="0,0,50,50">
     <area shape="circle" href="b.html" coords="120,80,50">
     <area shape="poly" href="c.html" coords="0,0,50,50,100,100,200,200">
/map>
Shape屬性的設置說明：

Rect：

定義一個矩形區域，coords屬性設置值為左上角、右下角的坐標，各個坐標之間用逗號分開。

Poly：

定義一個多邊型區域，coords屬性設置值為多邊形各個頂點的坐標值。

Circle：

定義一個圓形區域，coords屬性設置值為圓心坐標及半徑，前兩個參數分別為圓心的橫、縱坐標，第三個參數為半徑。

出處：http://www.nowamagic.net/html/html_MapArea.php

出處：http://hi.baidu.com/hlz8258/item/283b67f286ea490b84d278dc

出處：http://www.cnblogs.com/SkySoot/archive/2012/05/13/2498197.html

同時你也可以參考w3school的說明：http://www.w3school.com.cn/tags/tag_map.asp

HTML圖片熱區map area的用法

相關推薦

HTML圖片熱區map area的用法

矩形 中間 簡單 結束 tags rectangle ron lang 因此 <area>標記主要用於圖像地圖，通過該標記可以在圖像地圖中設定作用區域（又稱為熱點），這樣當用戶的鼠標移到指定的作用區域點擊時，會自動鏈接到預先設定好的頁面。其基本語法結構如下：

HTML圖片熱區劃分 area 的用法

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus®"&

HTML圖片熱區

pan target ati tar src log .... 半徑 https 文章來源於：https://www.cnblogs.com/mq0036/p/3337327.html 1 <!DOCTYPE html> 2 <html

html圖片熱區（可自適應螢幕）

要做個五一活動，商城部門就給了個jpg，懶得切圖就弄的這個圖片熱點。直接熱區加連結。做完了想起來了，還要跟app webview互動，白寫了。還是分享出來。<body><!--看好map的id，img的width，在編輯器裡畫熱區的時候是圖片自己的寬度，畫好

HTML熱區map座標，隨視窗大小自適應辦法（javascript）

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <h

圖片上按鈕特效 熱點連結(img map area)

      <div class="adv">                    <img src="./theme/imgs/adver4.jpg" width="321" height="80" border="0" usemap="#Map" /

HTML中的map和area標簽

http請求 避免 能夠 兩個 底部 html中 性能 圓心 幫助 1. 標簽介紹： 　　（1）map標簽： 該標簽是指圖片的映射，也就是說一張可以點擊的圖片的映射； 　　　　　　屬性介紹： 　　　　　　　　<1> id: <img>中的 us

Map.putAll()用法

輸出結果 net pla rgs get system void util ace import Java.util.HashMap; public class Map_putAllTest {public static void main(String[] args){

HTML圖片

之間 通過 路徑和 src spa tro span htm pan 1.圖片 <img src="圖片的路徑"> img標記常用的屬性： src(圖片的路徑) 註：分為相對路徑和絕對路徑 width(圖片的寬度) height(圖片的高度) alt(圖片不能顯

ES6新增數據結構Map的用法

轉換函數 out 使用數組 undefine true blog name efi foreach Javascript的Object本身就是鍵值對的數據結構，但實際上屬性和值構成的是”字符串-值“對，屬性只能是字符串，如果傳個對象字面量作為屬性名，

map reduce 用法 str處理lower() capitalize()

rod str -s tip col key mps capital 元素 -- 1 s=‘123456‘ 2 l={‘0‘:0,‘1‘:1,‘2‘:2,‘3‘:3,‘4‘:4,‘5‘:5,‘6‘:6,‘7‘:7,‘8‘:8,‘9‘:9}[s[0]] 3 print(l)

html圖片上傳閱覽並且點擊放大

toc 開機自啟 spec lai icon 知識 公司簡介 tag sed 關閉 qq_31540195的博客

asp.net-html圖片的上傳

校驗 消息 data date map error ext 提交 ring 1，文件的上傳存在一個非常致命的文件，要是上傳病毒文件，可能會使你的系統崩潰 所以判斷文件的類型的非常重要的。 不能單獨與後綴名判斷，下面展示一種webform類型的上傳文件案例。 1，書寫htm

map 的用法

spa line body table border 打印 height return nts 第一個接收函數名，第二個接收可叠代對象 ls = [1,2,3] rs = map(str, ls) #打印結果 [‘1‘, ‘2‘, ‘3‘] lt = [1,

HTML圖片上下之間的空隙是什麽原因

otto 解決 font 線下 單元 spa 一行 info 如果 在這個問題上，《權威指南》該書第三版第 146 頁有明確說到： 如果一個垂直元素沒有基線——也就是說，這是一個圖像或表單輸入元素，或者其它替換元素—&mdas

js數組中foEach和map的用法詳解 jq中的$.each和$.map

cnblogs arr 對象 cal for index source asc 原生js 數組中foEach和map的用法詳解 相同點： 1.都是循環遍歷數組(僅僅是數組)中的每一項。 2.forEach() 和 map() 裏面每一次執行匿名函數都支持3個參數：數組中的

c++ vector, set, map的用法總結

一、vector 向量容器 （1）標頭檔案 #include<vector> （2）建立vector物件， vector<int> vec；

html圖片按鈕&按鈕點選效果

} /** * 按鈕樣式 */ /* Radomir */ .ripple { position: relative; /*//隱藏溢位的徑向漸變背景*/ overflow: hidden; } .ripp

php正則提取html圖片(img)src地址與任意屬性的方法

<?php /*PHP正則提取圖片img標記中的任意屬性*/ $str  =  '<center><img src="/uploads/images/2017020716154162.jpg" height="120" width="120"

Webpack如何打包html圖片

1.安裝npm i -D html-loader 和 npm install url-loader --save-dev; 2.在webpack.config.js裡的module模組引入如下程式碼： { &