HTML <map> 标签

发表于2015-05-25 18:32:11| --次阅读| 来源webkfa| 作者小五

摘要：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像

实例
带有可点击区域的图像映射：

		html代码
	

运行代码

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

浏览器支持
所有主流浏览器都支持 <map> 标签。

定义和用法
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

HTML 与 XHTML 之间的差异
NONE

提示和注释：
注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

必需的属性

		代码
	

//为 map 标签定义唯一的名称。
id=unique_name

可选的属性

		代码
	

//为 image-map 规定的名称。
name=mapname

全局属性
<map> 标签支持 HTML 中的全局属性。
事件属性
<map> 标签支持 HTML 中的事件属性。

HTML <map> 标签

发表于2015-05-25 18:32:11| --次阅读| 来源webkfa| 作者小五

相关文章

html标题快速浏览101

相关文章