CSS學習筆記(十五) 使用map標簽實現(xiàn)單圖多熱點

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

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

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

map標簽

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

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

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

示例

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

首先用 ps 得到幾個坐標：

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




    
    Document

就是這樣。

關于area

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

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

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

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

參考資料

HTML < map> 標簽 - w3school

HTML < area> 標簽 - w3school

HTML 標簽的 coords 屬性

云服務器 GPU云服務器 map標簽 php中的map標簽 javascript實現(xiàn)map map的數(shù)據(jù)結構js實現(xiàn)

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111016.html

DIV+CSS學習筆記總結篇

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

iOS122 2019-08-29 11:13 評論0 收藏0
DIV+CSS學習筆記總結篇

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

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

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

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

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

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

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

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