我们如何用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>