CSS學(xué)習(xí)筆記(十五) 使用map標(biāo)簽實(shí)現(xiàn)單圖多熱點(diǎn)

EscapedDog 發(fā)布于2019-08-28 18:06 / 3360人閱讀

摘要：標(biāo)簽中的屬性可引用的標(biāo)簽中的或?qū)傩匀Q于瀏覽器，所以我們應(yīng)同時向標(biāo)簽添加和屬性。首先用得到幾個坐標(biāo)然后代碼實(shí)現(xiàn)就是這樣。定義三角形至少需要三組坐標(biāo)高緯多邊形則需要更多數(shù)量的頂點(diǎn)。

  來源：js中圖片點(diǎn)擊區(qū)域的實(shí)現(xiàn) - javascript - SegmentFault

map標(biāo)簽

定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點(diǎn)擊區(qū)域的一幅圖像。

area元素永遠(yuǎn)嵌套在map元素內(nèi)部。area元素可定義圖像映射中的區(qū)域。

img標(biāo)簽中的usemap屬性可引用的map標(biāo)簽中的id或name屬性（取決于瀏覽器），所以我們應(yīng)同時向map標(biāo)簽添加id和name屬性。

示例

例如我們想在下面一張圖實(shí)現(xiàn)九個熱點(diǎn)區(qū)域，不切圖，就使用map標(biāo)簽。

首先用 ps 得到幾個坐標(biāo)：

然后代碼實(shí)現(xiàn)：




    
    Document

就是這樣。

關(guān)于area

area 可以是圓形（circ），多邊形(poly)，矩形(rect)，不同形狀要選取不同的坐標(biāo)（coords）.

圓形：shape="circle"，coords="x,y,z"
x,y為圓心坐標(biāo)（x,y），z為圓的半徑

多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一對x,y坐標(biāo)都定義了多邊形的一個頂點(diǎn)(0,0) 是圖像左上角的坐標(biāo)）。定義三角形至少需要三組坐標(biāo)；高緯多邊形則需要更多數(shù)量的頂點(diǎn)。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一個坐標(biāo)是矩形的一個角的頂點(diǎn)坐標(biāo)，另一對坐標(biāo)是對角的頂點(diǎn)坐標(biāo)，"0,0" 是圖像左上角的坐標(biāo)。請注意，定義矩形實(shí)際上是定義帶有四個頂點(diǎn)的多邊形的一種簡化方法。（就是說，知道對角的兩個點(diǎn)的坐標(biāo)就行了。）

參考資料

HTML < map> 標(biāo)簽 - w3school

HTML < area> 標(biāo)簽 - w3school

HTML 標(biāo)簽的 coords 屬性

云服務(wù)器 GPU云服務(wù)器 map標(biāo)簽 php中的map標(biāo)簽 javascript實(shí)現(xiàn)map map的數(shù)據(jù)結(jié)構(gòu)js實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111016.html

相關(guān)文章

DIV+CSS學(xué)習(xí)筆記總結(jié)篇

摘要：每個列表項(xiàng)始于標(biāo)簽。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業(yè)規(guī)劃和前景職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望：未來IT行業(yè)企業(yè)需求...

iOS122 2019-08-29 11:13 評論0 收藏0
DIV+CSS學(xué)習(xí)筆記總結(jié)篇

摘要：每個列表項(xiàng)始于標(biāo)簽。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。標(biāo)簽的屬性應(yīng)當(dāng)與相關(guān)元素的屬性相同。姓名性別姓名性別單元格標(biāo)簽可以定義表格中的一個單元格，表示一個單元格。第一部分 HTML 第一章職業(yè)規(guī)劃和前景職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師自己創(chuàng)業(yè) 轉(zhuǎn)崗管理或其他 web前端開發(fā)的前景展望：未來IT行業(yè)企業(yè)需求...

HackerShell 2019-08-01 15:41 評論0 收藏0
重學(xué)前端學(xué)習(xí)筆記（十五）--瀏覽器工作解析（五）

摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結(jié)這一節(jié)主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業(yè)用實(shí)現(xiàn)一個玩具瀏覽器。。。。筆記說明重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音...

iliyaku 2019-08-02 16:17 評論0 收藏0
重學(xué)前端學(xué)習(xí)筆記（十五）--瀏覽器工作解析（五）

摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結(jié)這一節(jié)主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業(yè)用實(shí)現(xiàn)一個玩具瀏覽器。。。。筆記說明重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音...

dongxiawu 2019-08-26 13:46 評論0 收藏0
重學(xué)前端學(xué)習(xí)筆記（十五）--瀏覽器工作解析（五）

摘要：五繪制把任何位圖合成到最終位圖的操作稱為繪制。個人總結(jié)這一節(jié)主要講解了瀏覽器中的位圖操作部分，包括渲染合成和繪制三個部分。作業(yè)用實(shí)現(xiàn)一個玩具瀏覽器。。。。筆記說明重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音...

Sourcelink 2019-08-30 10:54 評論0 收藏0