HTML Map 標籤的使用

巴扎黑原創: 2017-06-27 13:37:563486瀏覽

今天看到京東的一個行銷活動，左邊浮動導覽是用HTML 中的map標籤寫的，因此有了這篇記錄的文章。

直接上圖如其中的大家電

HTML Map 標籤的使用

<p class="content">
	<img src="https://img.php.cn/upload/article/000/000/007/036cb8017291b49666f84f83d250e50f-0.png" usemap="#Mapslide" alt="HTML Map 標籤的使用" />
	<map name="Mapslide" id="Mapslide">
		<area shape="rect" coords="0,66,64,90" href="http://www.5itbao.cn" target="_blank" clstag="sale|keycount|8295365|1" />
	</map>
</p>

#順便在摘錄了一些相關資料奉上：

HTML 標籤

有可點擊區域的圖片映射;

所有主流瀏覽器都支援標籤。

##定義與用法

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

#提示與註解：註解：area 元素永遠嵌套在map 元素內部。 area 元素可定義影像映射中的區域。

註解：

中的usemap

屬性

可

引用

中的id 或name 屬性（取決於瀏覽器），所以我們應同時向新增id 和name 屬性。

#########HTML 與 XHTML 之間的差異######在 HTML 中，沒有結束標籤。 ######在 XHTML 中，必須正確地關閉。 ###

area 屬性

##circpoly_self_top

屬性	值	描述
coords	座標值	定義可點擊區域（對滑鼠敏感的區域）的座標。
href	URL	#定義此區域的目標 URL。
nohref	nohref	從影像映射排除某個區域。
shape	default rect
	#定義區域的形狀。 target _blank _parent

#############規定在何處開啟href 屬性指######### ###

HTML DOM Area 物件

##Area物件

Area 物件代表圖像映射的一個區域（圖像映射指的是帶有可點擊區域的圖像）

在HTML 文件中標籤每出現一次，就會建立一個Area 物件。

Area 物件的屬性

##accessKeyaltcoordshashhosthrefidnoHrefpathnameprotocol

屬性	#描述
##設定或傳回存取某個區域的快捷鍵。
設定或傳回瀏覽器無法顯示某個區域時的取代文字。
設定或傳回影像對應中可點選區域的座標。
設定或傳回某個區域中 URL 的錨部分。
設定或傳回某個區域中 URL 的主機名稱和連接埠。
設定或傳回圖片對應中連結的 URL。
設定或傳回某個區域的 id。
設定或傳回某個區域是否應是活動的還是非活動的。
設定或傳回某個區域中的 URL 的路徑名稱。
設定或傳回某個區域中的 URL 的協定。
search	設定或傳回某個區域中 URL 的查詢字串部分。
shape	設定或傳回影像映射中某個區域的形狀。
tabIndex	設定或傳回某個區域的 tab 鍵控制順序。
target	設定或傳回在何處開啟區域中的 link-URL。

的標準屬性

	#描述
className	設定或傳回元素的class 屬性。
dir	設定或傳回文字的方向。
lang	設定或傳回元素的語言程式碼。
title	設定或傳回元素的 title。

以上是HTML Map 標籤的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Html中的map標籤下一篇：Html中的map標籤

看更多