国际访客建议访问 Primers 编程伙伴 国际版站点 > HTML 教程 > map 以获得更好的体验。

# HTML 的 <map> 标签

请查看 HTML 元素帮助手册 了解更多 HTML 元素。

HTML 的 <map> 元素与 <area> 元素一起使用来定义一个图像映射（一个可点击的链接区域）。

# 属性

请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。

  • name: name 属性给予该映射引用的名称，这个属性必须存在，值不得为空并且不能带空格。name 属性的值不得与同文档中其他 <map> 元素的该属性值相同，如果还指定了 id 属性，则两个属性的值必须相同。

# 示例

<img 
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/640px-World_map_-_low_resolution.svg.png"
    alt="世界地图"
    usemap="#worldmap" width="640" height="418"
/>

<map name="worldmap">
    <!-- 北美洲 -->
    <area shape="circle" coords="130,100,100" href="https://en.wikipedia.org/wiki/North_America" alt="北美洲" title="北美洲" target="_blank">

    <!-- 南美洲 -->
    <area shape="circle" coords="190,260,90" href="https://en.wikipedia.org/wiki/South_America" alt="南美洲" title="南美洲" target="_blank">

    <!-- 欧洲 -->
    <area shape="circle" coords="350,110,50" href="https://en.wikipedia.org/wiki/Europe" alt="欧洲" title="欧洲" target="_blank">

    <!-- 非洲 -->
    <area shape="circle" coords="330,220,80" href="https://en.wikipedia.org/wiki/Africa" alt="非洲" title="非洲" target="_blank">

    <!-- 亚洲 -->
    <area shape="rect" coords="400,20,530,180" href="https://en.wikipedia.org/wiki/Asia" alt="亚洲" title="亚洲" target="_blank">

    <!-- 大洋洲（澳大利亚） -->
    <area shape="circle" coords="550,290,50" href="https://en.wikipedia.org/wiki/Oceania" alt="大洋洲" title="大洋洲" target="_blank">

    <!-- 南极洲 -->
    <area shape="rect" coords="150,370,550,418" href="https://en.wikipedia.org/wiki/Antarctica" alt="南极洲" title="南极洲" target="_blank">
</map>

  • 点击地图上的区域会打开对应区域的 Wiki 页面

# 推荐阅读

本文 更新于: 2025-11-27 09:38:03 创建于: 2025-11-27 09:38:03