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

時間 2019-12-04

標籤 css 學習筆記十五使用 map 標籤實現熱點欄目 CSS 简体版

原文原文鏈接

來源：js中圖片點擊區域的實現 - javascript - SegmentFaultjavascript

map標籤

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

area元素永遠嵌套在map元素內部。area元素可定義圖像映射中的區域。
img標籤中的usemap屬性可引用的map標籤中的id或name屬性（取決於瀏覽器），因此咱們應同時向map標籤添加id和name屬性。

示例

例如咱們想在下面一張圖實現九個熱點區域，不切圖，就使用map標籤。java

首先用 ps 獲得幾個座標：segmentfault

而後代碼實現：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="cat.jpg" alt="" usemap="#catmap" >
    <map name="catmap">
        <area shape="rect" coords="0,0,148,139" href ="http://www.baidu.com" target ="_blank" alt="">
        <area shape="rect" coords="148,139,295,0" href ="http://www.sina.com" target ="_blank" alt="">
        <area shape="rect" coords="295,0,439,140" href ="http://www.qq.com" target ="_blank" alt="">
        <area shape="rect" coords="148,139,0,340" href ="http://www.163.com" target ="_blank" alt="">
        <area shape="rect" coords="148,139,296,340" href ="http://www.soso.com" target ="_blank" alt="">
        <area shape="rect" coords="296,340,439,140" href ="http://sf.gg" target ="_blank" alt="">
        <area shape="rect" coords="0,340,148,493" href="http://www.zhihu.com" target ="_blank" alt="">
        <area shape="rect" coords="148,493,296,340" href="http://z.cn" target ="_blank" alt="">
        <area shape="rect" coords="296,340,436,490" href="http://jd.com" target ="_blank" alt="">
    </map>
</body>
</html>

就是這樣。spa

關於area

area 能夠是圓形（circ），多邊形(poly)，矩形(rect)，不一樣形狀要選取不一樣的座標（coords）.code
圓形：shape="circle"，coords="x,y,z"
x,y爲圓心座標（x,y），z爲圓的半徑htm
多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一對x,y座標都定義了多邊形的一個頂點(0,0) 是圖像左上角的座標）。定義三角形至少須要三組座標；高緯多邊形則須要更多數量的頂點。圖片
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一個座標是矩形的一個角的頂點座標，另外一對座標是對角的頂點座標，"0,0" 是圖像左上角的座標。請注意，定義矩形其實是定義帶有四個頂點的多邊形的一種簡化方法。（就是說，知道對角的兩個點的座標就好了。）ip