描述:

HTML的<area>标签用于定义图像地图中的可点击区域或活动区域,这些区域与超链接相关联。如果您点击这些区域,它将执行一些操作,比如打开新的图像、新的URL等。该标签始终与<map>元素一起使用。

在图像地图中,可以使用多个<area>元素在单个<map>元素中将不同的区域设置为超链接到不同的位置。

<area>元素需要定义(必需)的属性shapecoords。shape属性指定区域的形状,如矩形圆形正方形多边形。coords属性定义图像内部区域的坐标。

什么是图像地图

图像地图被定义为具有活动区域的图形图像,因此当用户点击这些区域时,可以链接到不同的目标位置。为了定义图像地图,我们需要以下内容:

  • HTML 元素,其中包含usemap属性,用于定义一个有效的地图名称。
  • HTML <map> 元素,其中包含name属性,其值必须与usemap相同。
  • 一个或多个<area>元素,位于<map>元素内部,用于创建图像地图中的可点击区域。

语法

<area shape="" coords="" href="">

以下是HTML <area> 标签的一些规范:

显示方式块级显示
开始标签/结束标签只有开始标签(结束标签被禁止使用)
用途图像地图

示例

<!DOCTYPE html>
<html>
<head>
  <title>HTML Area tag</title>
  <style>
    body {
      margin-left: 250px;
    }
  </style>
</head>
<body>
  <h2>Example of HTML Area tag</h2>
  <img src="image1.png" usemap="#web">
  <map name="web">
    <area shape="rect" coords="66,117,131,168" href="https://www.javatpoint.com/html-tutorial">
    <area shape="rect" coords="199,36,277,85" href="https://www.javatpoint.com/css-tutorial">
    <area shape="rect" coords="330,107,406,159" href="https://www.javatpoint.com/bootstrap-tutorial">
    <area shape="rect" coords="199,185,267,236" href="https://www.javatpoint.com/javascript-tutorial">
  </map>
</body>
</html>

htmlareatag.png

属性:

特定属性:

属性描述
alt文本如果浏览器无法显示图像,则显示备用文本字符串。
coordsx1,y1,x2,y2(矩形)定义矩形的左上角和右下角的坐标。
x,y, radius(圆形)定义圆形的坐标。
x1,y1,x2,y2,x3,y3,..(多边形)定义多边形的顶点。
hrefhref定义活动区域的超链接目标。
target_blank在新窗口中打开链接。
_parent在父窗口中打开链接。
_self在当前窗口中打开链接。
_top在当前窗口中以全宽度打开链接。
frame_name在框架中打开链接。(在HTML5中不受支持)
shapedefault定义默认区域(矩形)。
rect定义矩形区域。
circle定义圆形区域。
poly定义多边形区域。
download文件名定义用于下载资源的超链接。
relalternate author bookmark help license next nofollow noreferrer prefetch prev search tag定义当前文档与链接文档之间的关系。
hreflanglanguage_code指定链接资源的语言。
typemedia_type指定链接源的MIME类型。(在HTML5中不受支持)

全局属性:

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

事件属性:

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

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<area>

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想