📌  相关文章
📜  HTML |<map>标签(1)

📅  最后修改于: 2023-12-03 15:31:15.491000             🧑  作者: Mango

HTML | 标签

简介

标签定义了一个客户端图像映射，在图像上定义区域并点击该区域时触发相应的操作。通常与 标签一起使用。

语法
<map name="mapname">
  <area shape="rect" coords="0,0,100,100" href="http://www.example.com/">
  <area shape="circle" coords="150,150,50" href="http://www.example.com/">
  <area shape="poly" coords="220,10,300,10,325,50,325,100,280,125,220,125" href="http://www.example.com/">
</map>

<img src="image.png" usemap="#mapname">
属性
  • name：必需，定义映射的名称
  • tabindex：定义 tab 键控制次序
  • accesskey：定义激活元素的快捷键
  • title：定义有关区域的额外信息
标签

在 标签中定义区域时，需要使用 标签。 标签定义了一个客户端图像映射的区域，并且提供用户点击时执行的操作。

属性
  • shape：必需，指定区域形状，可选值为 "rect" (矩形), "circle" (圆形), 或 "poly" (多边形)
  • coords：必需，定义区域的坐标（取决于形状）
  • href、target、alt、title：定义与链接相关的属性
示例
<map name="mapname">
  <area shape="rect" coords="0,0,100,100" href="http://www.example.com/" alt="矩形">
  <area shape="circle" coords="150,150,50" href="http://www.example.com/" alt="圆形">
  <area shape="poly" coords="220,10,300,10,325,50,325,100,280,125,220,125" href="http://www.example.com/" alt="多边形">
</map>

<img src="image.png" usemap="#mapname" alt="客户端图像映射">

客户端图像映射示例

总结

标签定义形状区域， 标签定义每个形状的区域。使用这两个标签可以方便地为图像创建客户端映射。