婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > CSS實現(xiàn)圖像映射的方法

CSS實現(xiàn)圖像映射的方法

熱門標簽:電話機器人鑰匙扣 電銷外呼系統(tǒng)是違法的嗎 威力最大的電銷機器人 漯河外呼調研線路 旅游地圖標注線路 400電話唐山辦理 地圖標注位置怎么弄圖 電銷專用外呼線路 廣西房產智能外呼系統(tǒng)推薦

一、前言

利用圖像映射可以將圖像的一些區(qū)域指定為熱點。鼠標滑過該區(qū)域,可以展示一些內容信息。當然我們也可以單擊該區(qū)域進行跳轉,實現(xiàn)一個類似于圖像導航的功能。

我從網上找了上邊這樣一張圖片,想要實現(xiàn)以下功能:當鼠標懸停在每個人身上時,希望出現(xiàn)一個矩形框,單擊后可以進行跳轉到相應的網站。

效果如下:

二、代碼實現(xiàn)

1、首先需要做的是將圖像添加到頁面中,放在一個已命名的div中:

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

2、然后,在圖像后面添加每個人的網站鏈接的列表。需要給每個列表項分配一個類以便標識列表項中的人。還可以給每個鏈接設置 title 屬性,其中包含這個人的名字。這樣的話,當鼠標懸停在鏈接上時,在大多數(shù)瀏覽器上顯示的工具提示中會顯示人名。

<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>

我這里想要對鼠標懸停時顯示的內容樣式進行自定義,沒有使用 title 屬性,所以在 a 標簽中加了一個 span

3、設置外層div的寬度和高度,讓它和圖像的大小保持一致。然后,將div的position屬性設置為relative,因為這樣就可以讓包含的鏈接可以相對于div(也就是圖像)的邊緣進行絕對定位。

不希望頁面上顯示列表的黑圓點,另外也想去除列表項的內外邊距。

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

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

4、下一件事情是對鏈接應用樣式。對鏈接進行絕對定位(因為我們已經在外層的div上設置了position屬性為relative,所以此處是相對于div進行定位的,而div和圖片的寬高是一樣的,也就相當于我們是從圖片的左上角開始定位),將它們分別定位到相應的人身上,形成熱點。但是,首先需要設置它們的寬度和高度,從而創(chuàng)建需要的單擊區(qū)域。

.imagemap a {
  position: absolute;
  /*轉為塊級元素,這樣可以形成一塊區(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;
}

/*鼠標滑過的時候,顯示一個方框*/
.imagemap a:hover {
  border: 1px solid white;
}

5、接下來我們需要設置當鼠標滑過的時候,顯示的文本內容的樣式。我們希望它出現(xiàn)在人物的上方,有一個背景顏色和內邊距等樣式,文本居中:

.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;
}

注意:

  • 當position屬性取值為absolute絕對定位時,元素會被移出正常文檔流,通過指定元素相對于最近的非 static 定位祖先元素的偏移,來確定元素位置。 因為列表中的鏈接a標簽,我們已經讓它絕對定位了,所以a標簽中的span是相對于鏈接a進行定位的。
  • 這里設置top為負值是讓元素向上移動一段距離,left值是-100em,是想讓span一開始不在可視區(qū)域之內。然后當鼠標經過時,再重新設置left的值到正確位置。

另外,一般情況下,對行內元素設置寬高是沒有用的,但是上邊的代碼中我們可以成功對span進行寬度width的設置,是因為這里span已經是絕對定位了,絕對定位后的行內元素可以設置寬和高。

知識點:行內元素設置寬高的幾種方法

行內元素設置寬高的3種方法

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

6、沒有了,可以測試看一下,現(xiàn)在就實現(xiàn)了一個簡單的圖像映射。

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

標簽:銅陵 試駕邀約 湖北 欽州 湘西 無錫 綏化 焦作

巨人網絡通訊聲明:本文標題《CSS實現(xiàn)圖像映射的方法》,本文關鍵詞  CSS,實現(xiàn),圖像,映射,的,方法,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《CSS實現(xiàn)圖像映射的方法》相關的同類信息!
  • 本頁收集關于CSS實現(xiàn)圖像映射的方法的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 朝阳市| 万荣县| 公安县| 玉门市| 万山特区| 治多县| 赤壁市| 齐河县| 宁乡县| 永仁县| 兴山县| 凌海市| 延安市| 台湾省| 呼图壁县| 桂平市| 汉川市| 兰考县| 叶城县| 门源| 会昌县| 托里县| 扶绥县| 龙海市| 江口县| 逊克县| 十堰市| 天门市| 高州市| 兴文县| 团风县| 天峻县| 彭州市| 沂源县| 唐山市| 三穗县| 南岸区| 任丘市| 铜陵市| 攀枝花市| 齐齐哈尔市|