Html+Css_利用img 的usemap屬性和 map 以及 area(list) 對影象敏感區域定位

阿新 • • 發佈：2019-01-19

1.利用img 的usemap屬性，利用usemap對應到map的name或者id。

2.並在map標籤裡面巢狀多個area標籤。

3.不同的area裡面的href 屬性以及相對於影象原點（0,0）的coords 屬性不一致,可以實現不同區域定位到不同的網址。

W3C原理講解如下

核心原始碼：

純html實現：

    <!--圓形產品的背景-->
        <div class="product_solution_list">
            <div class="product_solution_list_item">
                <img src="./src/img/product_D501.png" usemap="#D501"/>
                <map name="D501" id="D501">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
            <div class="product_solution_list_item">
                <img src="./src/img/product_EA.png" usemap="#EA"/>
                <map name="EA" id="EA">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
            <div class="product_solution_list_item">
                <img src="./src/img/product_kx.png" usemap="#KX"/>
                <map name="KX" id="KX">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
            <div class="product_solution_list_item">
                <img src="./src/img/product_D500.png" usemap="#D500"/>
                <map name="D500" id="D500">
                    <area shape="circle" coords="92,92,92" href="http://www.baidu.com" target="_blank"/>
                </map>
            </div>
        </div>

實現效果

只有中間的圓形區域才對應滑鼠敏感區域

Html+Css_利用img 的usemap屬性和 map 以及 area(list) 對影象敏感區域定位

1.利用img 的usemap屬性，利用usemap對應到map的name或者id。 2.並在map標籤裡面巢狀多個area標籤。 3.不同的area裡面的href 屬性以及相對於影象原點（0,0）

【html】使用img標簽和背景圖片之間的區別

tle smi 圖像 dia upload 查詢 ref 屏幕文本 1.加載問題背景圖片會等到html結構加載完成才開始加載 img標簽是網頁結構的一部分，會在html結構加載的時候加載在網頁加載的過程中，背景圖片會等到結構加載完成（網頁的內容全部顯示以後）才開始加載

img usemap屬性中國地圖連結

html的img標籤：定義一個影象在網頁中引入。它還有個usemap屬性很有意思。　　看看51ditu首頁中有一個地圖，中部有個中國地圖。點選右鍵下載下來看下就是一個普通的圖片。　　但點選地圖上的省份卻可以觸發不同的事件（或開啟不同的連結），很有意思。原來是使用了usem

J1003.JavaFX屬性和綁定01——簡單對象

框架 create col 包裝控制 package java bean 是否 pre JavaBean擴展為了實現基於JavaBean的屬性、綁定以及事件機制，JavaFX對JavaBean進行了擴展，JavaBean不再是POJO，顯得更加“重量級”一些。 Ja

linear-grident的屬性和使用以及對顏色後面參數(百分比)的理解

css3 實體 rect dig 做出多個 multi 空間 dial css3新增Gradient屬性，用來增加漸變的效果，漸變分為線性漸變 linear-grident 和徑向漸變 radial-grident，這篇文章主要介紹線性漸變linear-grident

python3面向物件（3）私有屬性和方法以及訪問私有屬性和方法的方式

python3中的私有屬性和方法是以__兩個下劃線開頭的： class Woman(object): #定義一個woman類 def __init__(self,name): self.name = name #公有屬性 self

關於map巢狀map和map巢狀list（轉載https://blog.csdn.net/mustbehard/article/details/17310043）

import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import java.util.Set;

EL之隨機性的Bagging：利用隨機選擇屬性的bagging方法解決迴歸(對多變數的資料集+實數值評分預測)問題

EL之隨機性的Bagging：利用隨機選擇屬性的bagging方法解決迴歸(對多變數的資料集+實數值評分預測)問題輸出結果設計思路核心程式碼 for iTrees in range(numTreesMax):

RestTemplate傳輸值為null的屬性、利用FastJson將屬性中有空值null的對象轉化成Json字符串

但是 emp bubuko 屬性 pojo ets 傳輸情況 system 一個pojo類： import lombok.Data; @Data public class Friend { private String name; private

【Kotlin從入門到深坑】之類的覆蓋屬性和方法以及抽象類

簡介本篇部落格主要是介紹Kotlin語法中的【類的覆蓋屬性和方法以及抽象類】相關的知識，幫助各位更快的掌握Kotlin，如果有疏漏或者錯誤，請在留言中指正，謝謝。系列彙總地址上一篇部落格中我們詳細介紹了類的繼承和構造，下面我們來講一下，在繼承時如何

js和jQuery以及easyui實現對下拉框的指定賦值

js實現： 1. 通過讓第i個option為selected實現選中第i個，程式碼如下：（id為下拉框id）（1） document.getElementById("id").options[i].selected=true; （2）document.getElemen

前端HTML標籤影象的屬性和使用/影象img與背景background的區別

1 、背景屬性的作用控制元素的背景顏色和背景影象等資訊 2、背景屬性 1、背景顏色屬性：background-color 取值：合法顏色值

五月六日 HTML標簽超鏈接、圖片屬性和列表

one ima 網頁沖突 abc 今天 jpg self blank 今天的內容主要是HTML標簽的超鏈接圖片屬性列表的用法一、超鏈接，錨點和下載。（1）超鏈接　　　　<a href="URL" targe="_blank">網站名</a>

HTML embed標簽使用方法和屬性詳解

利用是否 parent als ase sig 默認 eve sel 一、基本語法代碼如下: embed src=url 說明：embed可以用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE 都支持。url為

利用反射操作bean的屬性和方法

兩個決定 dto epo cts 強制多選通過報表今天在開發中碰到這樣一個場景：當請求添加項目下的目錄時，傳過來的是一個IndexModel，這個Model裏有關於這個目錄字段的詳細信息，包括基礎報表，實時，漏鬥等信息（這些字段類型都是boolean），對應於頁面

html表單中的name屬性和value屬性

標簽 put -s tex 什麽 input 例子 htm use 舉例：比如<input type="text" name=" username" value="aa">女孩在這個例子中value究竟有什麽用啊，後面都寫了女孩了，顯示的內容一定是女孩女孩

利用java反射調用類的屬性和方法

strong lec 測試結果正在 bject cte static err ucc 十一結束了，盼望著的十一要做的事情也沒有做成。有時候的預期和現實總是有些許的變故，Economic freedom--閑扯結束。今天，就簡單點。一、定義 java反射：程序運行時，通過

HTML中在img使得src屬性為php程式（可為JPgraph所產生的影象）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> functio

img標籤title和alt屬性

<!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>img屬性</title> <met

【html】使用img標籤和背景圖片之間的區別

1.載入問題背景圖片會等到html結構載入完成才開始載入 img標籤是網頁結構的一部分，會在html結構載入的時候載入在網頁載入的過程中，背景圖片會等到結構載入完成（網頁的內容全部顯示以後）才開始載入，而img標籤是網頁結構（內容）的一部分會在html結構載入的過程中載入，換句話講，網頁會先載入

Html+Css_利用img 的usemap屬性 和 map 以及 area(list) 對影象敏感區域定位

相關推薦

Html+Css_利用img 的usemap屬性和 map 以及 area(list) 對影象敏感區域定位