HTML <map> 标签的 name 属性 详解
HTML基础 2022-06-02 12:04:56小码哥的IT人生shichen
HTML <map> 标签的 name 属性
实例
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
完整实例【亲自试一试】：
<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 ="/demo/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/demo/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/demo/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
必需的 name 属性规定 image-map 的名称。
name 属性与 <img> 标签的 usemap 属性相关联，创建图像与映射之间的联系。
map 元素包含的 area 元素，定义图像映射中的可点击区域。
浏览器支持
所有主流浏览器都支持 name 属性。
语法
<map name="value">
属性值
| 值 | 描述 |
|---|---|
| name | image-map 的名称。 |
