我们如何用HTML定义图像映射中的区域？

使用<area>标记以HTML定义图像映射中的区域。

HTML <area>标记支持以下附加属性-

属性	值	描述
Alt键	文本	指定区域的备用文本。
座标	如果shape =“ rect”，则coords =“ left，top，right，bottom” 如果shape =“ circ”，则coords =“ centerx，centery，radius” 如果shape =“ poly”，则坐标=“ x1，y1，x2，y2，..，xn，yn”	指定适合shape属性的坐标，以定义图像映射的图像区域。
下载	文件名	指定当用户单击超链接时下载目标。
Href	网址	指定页面的URL或链接指向的锚点的名称。
hreflang	language_code	指定目标URL的语言。
媒体	媒体查询	指定目标URL针对其优化的媒体/设备。
Nohref	真假	从图像映射中排除区域
rel	备用作者书签帮助许可证下一个 nofollow noreferrer 预取 prev 搜索标签	指定当前文档和目标URL之间的关系
形状	RECT 矩形保监会圈	指定图像贴图的形状
	聚多边形
目标	_blank _parent _self _top	在何处打开目标URL。 _blank-目标URL将在新窗口中打开 _self-目标URL将在与单击相同的框架中打开 _parent-目标URL将在父框架集中打开 _top-目标URL将在整个正文中打开窗口
类型	mime_type	指定目标URL的MIME（多用途Internet邮件扩展名）类型。

示例

您可以尝试运行以下代码以实现<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>

基础教程