一、前言

利用圖像映射可以將圖像的一些區(qū)域指定為熱點(diǎn)。鼠標(biāo)滑過(guò)該區(qū)域，可以展示一些內(nèi)容信息。當(dāng)然我們也可以單擊該區(qū)域進(jìn)行跳轉(zhuǎn)，實(shí)現(xiàn)一個(gè)類(lèi)似于圖像導(dǎo)航的功能。

我從網(wǎng)上找了上邊這樣一張圖片，想要實(shí)現(xiàn)以下功能：當(dāng)鼠標(biāo)懸停在每個(gè)人身上時(shí)，希望出現(xiàn)一個(gè)矩形框，單擊后可以進(jìn)行跳轉(zhuǎn)到相應(yīng)的網(wǎng)站。

效果如下：

二、代碼實(shí)現(xiàn)

1、首先需要做的是將圖像添加到頁(yè)面中，放在一個(gè)已命名的div中:

<div class="imagemap">
  <img width="500" height="350" src="test.jpg">
</div>

2、然后，在圖像后面添加每個(gè)人的網(wǎng)站鏈接的列表。需要給每個(gè)列表項(xiàng)分配一個(gè)類(lèi)以便標(biāo)識(shí)列表項(xiàng)中的人。還可以給每個(gè)鏈接設(shè)置 title 屬性，其中包含這個(gè)人的名字。這樣的話(huà)，當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，在大多數(shù)瀏覽器上顯示的工具提示中會(huì)顯示人名。

<div class="imagemap">
  <img width="500" height="350" src="test.jpg">
  <ul>
    <li class="baidu">
      <a href="https://www.baidu.com" target="_blank">
        <span class="note">百度</span>
      </a>
    </li>
    <li class="tengxun">
      <a href="https://www.qq.com" target="_blank">
        <span class="note">騰訊</span>
      </a>
    </li>
    <li class="xinlang">
      <a href="https://www.sina.com.cn" target="_blank">
        <span class="note">新浪</span>
      </a>
    </li>
    <li class="taobao">
      <a href="https://www.taobao.com" target="_blank">
        <span class="note">淘寶</span>
      </a>
    </li>
    <li class="jd">
      <a href="https://www.jd.com" target="_blank">
        <span class="note">京東</span>
      </a>
    </li>
  </ul>
</div>

我這里想要對(duì)鼠標(biāo)懸停時(shí)顯示的內(nèi)容樣式進(jìn)行自定義，沒(méi)有使用 title 屬性，所以在 a 標(biāo)簽中加了一個(gè) span

3、設(shè)置外層div的寬度和高度，讓它和圖像的大小保持一致。然后，將div的position屬性設(shè)置為relative，因?yàn)檫@樣就可以讓包含的鏈接可以相對(duì)于div(也就是圖像)的邊緣進(jìn)行絕對(duì)定位。

不希望頁(yè)面上顯示列表的黑圓點(diǎn)，另外也想去除列表項(xiàng)的內(nèi)外邊距。

.imagemap {
  width: 500px;
  height: 350px;
  position: relative;
}

.imagemap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

4、下一件事情是對(duì)鏈接應(yīng)用樣式。對(duì)鏈接進(jìn)行絕對(duì)定位（因?yàn)槲覀円呀?jīng)在外層的div上設(shè)置了position屬性為relative，所以此處是相對(duì)于div進(jìn)行定位的，而div和圖片的寬高是一樣的，也就相當(dāng)于我們是從圖片的左上角開(kāi)始定位），將它們分別定位到相應(yīng)的人身上，形成熱點(diǎn)。但是，首先需要設(shè)置它們的寬度和高度，從而創(chuàng)建需要的單擊區(qū)域。

.imagemap a {
  position: absolute;
  /*轉(zhuǎn)為塊級(jí)元素，這樣可以形成一塊區(qū)域*/
  display: block;
  width: 50px;
  height: 60px;
  text-decoration: none;
}

.imagemap .baidu a {
  top: 70px;
  left: 65px;
}

.imagemap .tengxun a {
  top: 85px;
  left: 150px;
}

.imagemap .xinlang a {
  top: 70px;
  left: 230px;
}

.imagemap .taobao a {
  top: 70px;
  left: 305px;
}

.imagemap .jd a {
  top: 70px;
  left: 365px;
}

/*鼠標(biāo)滑過(guò)的時(shí)候，顯示一個(gè)方框*/
.imagemap a:hover {
  border: 1px solid white;
}

5、接下來(lái)我們需要設(shè)置當(dāng)鼠標(biāo)滑過(guò)的時(shí)候，顯示的文本內(nèi)容的樣式。我們希望它出現(xiàn)在人物的上方，有一個(gè)背景顏色和內(nèi)邊距等樣式，文本居中：

.imagemap a .note {
  position: absolute;
  top: -2em;
  left: -100em;
  background-color: #42b983;
  color: white;
  width: 2em;
  text-align: center;
  padding: 0.2em 0.5em;
  border-radius: 5px;
}

.imagemap a:hover .note {
  left: 0;
}

注意：

• 當(dāng)position屬性取值為absolute絕對(duì)定位時(shí)，元素會(huì)被移出正常文檔流，通過(guò)指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來(lái)確定元素位置。 因?yàn)榱斜碇械逆溄觓標(biāo)簽，我們已經(jīng)讓它絕對(duì)定位了，所以a標(biāo)簽中的span是相對(duì)于鏈接a進(jìn)行定位的。
• 這里設(shè)置top為負(fù)值是讓元素向上移動(dòng)一段距離，left值是-100em，是想讓span一開(kāi)始不在可視區(qū)域之內(nèi)。然后當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，再重新設(shè)置left的值到正確位置。

另外，一般情況下，對(duì)行內(nèi)元素設(shè)置寬高是沒(méi)有用的，但是上邊的代碼中我們可以成功對(duì)span進(jìn)行寬度width的設(shè)置，是因?yàn)檫@里span已經(jīng)是絕對(duì)定位了，絕對(duì)定位后的行內(nèi)元素可以設(shè)置寬和高。

知識(shí)點(diǎn)：行內(nèi)元素設(shè)置寬高的幾種方法

行內(nèi)元素設(shè)置寬高的3種方法

• 使用display： display:block / inline-block
• 使用position： position:absolute / fixed
• 使用float：float:left / right

6、沒(méi)有了，可以測(cè)試看一下，現(xiàn)在就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖像映射。

到此這篇關(guān)于CSS實(shí)現(xiàn)圖像映射的文章就介紹到這了,更多相關(guān)CSS實(shí)現(xiàn)圖像映射內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論