這篇文章主要講解了“怎么用CSS中的map標簽制作單圖多區(qū)域點擊”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用CSS中的map標簽制作單圖多區(qū)域點擊”吧！

10多年的改則網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整改則建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“改則網(wǎng)站設(shè)計”,“改則網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

map標簽

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

    area元素永遠嵌套在map元素內(nèi)部。area元素可定義圖像映射中的區(qū)域。
    img標簽中的usemap屬性可引用的map標簽中的id或name屬性（取決于瀏覽器），所以我們應(yīng)同時向map標簽添加id和name屬性。

示例

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

首先用 ps 得到幾個坐標：

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

CSS Code復(fù)制內(nèi)容到剪貼板

1.   

2.   

3.   

4.        

5.        

6.   

7.   

8.        

9.        

10.            

11.            

12.            

13.            

14.            

15.            

16.            

17.            

18.            

19.        

20.   

21.   

就是這樣。
關(guān)于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" 是圖像左上角的坐標。請注意，定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。（就是說，知道對角的兩個點的坐標就行了。）

感謝各位的閱讀，以上就是“怎么用CSS中的map標簽制作單圖多區(qū)域點擊”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用CSS中的map標簽制作單圖多區(qū)域點擊這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

當前題目：怎么用CSS中的map標簽制作單圖多區(qū)域點擊
本文URL：http://m.br277.com/article/pdiips.html