如何使用 HTML 定义图像地图中的区域?

使用 <area> 标签在 HTML 中定义图像地图中的区域。

HTML <area> 标签支持以下附加属性 −

属性	值	描述
Alt	Text	指定该区域的替代文本。
coords	if shape = "rect" then coords = "left, top, right, bottom" if shape = "circ" then coords = "centerx, centery, radius" if shape = "poly" then coords = "x1, y1, x2, y2,..,xn, yn"	指定适合形状属性的坐标来定义图像地图的图像区域。
download	filename	Specifies that the target gets downloaded when the hyperlink is clicked by the user.
Href	URL	指定页面的 URL 或链接指向的锚点的名称。
hreflang	language_code	指定目标 URL 的语言。
media	media query	指定目标 URL 针对其进行优化的媒体/设备。
Nohref	true/false	从图像映射中排除某个区域
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	指定当前文档和目标 URL 之间的关系
Shape	rect rectangle circ circle	指定图像映射的形状
	poly polygon
Target	_blank _parent _self _top	目标 URL 的打开位置。 _blank − 目标 URL 将在新窗口中打开 _self − 目标 URL 将在被点击的同一框架中打开 _parent − 目标 URL 将在父框架集中打开 _top − 目标 URL 将在整个窗口主体中打开
type	mime_type	指定目标 URL 的 MIME(多用途互联网邮件扩展)类型。

示例

您可以尝试运行以下代码来实现 <area> 标签 −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>
   <body>
      <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

      <map name = "tutorials">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />

         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />

         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>
</html>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/