1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
map.md 2.12 KB
AI 代码解读
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-05-04 01:20 . doc: update document.

HTML <map> 标签

示例

带有可点击区域的图像地图:

<img src="../assets/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Workplace

定义和用法

<map> 标签用于定义图像映射。 图像地图是具有可点击区域的图像。

<map> 元素的必需名称属性与 <img> 的 usemap 属性相关联,并在图像和地图之间创建关系。

<map> 元素包含许多 <area> 元素,它们定义了图像地图中的可点击区域。

浏览器支持

Element chrome edge firefox safari opera
<map> Yes Yes Yes Yes Yes

属性 Attributes

属性 描述
name mapname 必需的。 指定图像映射的名称

全局属性

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

事件属性

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

更多示例

另一个带有可点击区域的图像地图:

<img src="../assets/workplace.jpg" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

默认 CSS 设置

大多数浏览器将显示具有以下默认值的 <map> 元素:

map {
  display: inline;
}
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助