H5图像映射——area标签

本文详细介绍了HTML5中的image映射和area标签的使用,包括定义、shape属性(default, rect, circ, poly)、coords属性的坐标规则以及target属性的用法,解释了如何创建可点击的图像区域并控制链接打开方式。" 80223781,7533938,VR漫游项目:手柄轨迹识别与神经网络应用,"['虚拟现实', 'Unity开发', '机器学习', '数据处理', '游戏开发']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<area> 标签定义是图像映射中的区域,即带有可点击区域的图像。

一、定义

1、<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系(注:由于浏览器兼容不同,usemap 属性也可关联 id 属性,所以我们需要同时向 <map> 添加 idname两个属性)。
2、area 元素嵌套在 <map>标签中。
举例:将长宽都为300px的灰色图片中两个色块儿做成映射区域。

<img src="./map.png" usemap="#imgMap" class="img" />
<map name="imgMap" id="imgMap">
	<area shape="rect" coords="10,10,110,110" href="https://www.baidu.com" alt="百度" />
	<area shape="circ" coords="190,200,50" href="https://www.w3school.com.cn" alt="w3school" />
</map>

在这里插入图片描述

图像映射

二、属性
属性名属性值含义是否必要
alttext定义此区域的替换文本
coords坐标值定义可点击区域(对鼠标敏感的区域)的坐标
hrefURL定义此区域的目标 URL
nohrefnohref从图像映射排除某个区域,即规定该区域没有相关的链接。
shapedefault、rect、circ、poly定义区域的形状
target_blank、_parent、_self、_top规定在何处打开 href 属性指定的目标 URL
1、shape 详解

shape 属性用于定义图像映射中对鼠标敏感的区域的形状:

  • 整个区域(default),默认值
  • 圆形(circ 或 circle)
  • 多边形(poly 或 polygon)
  • 矩形(rect 或 rectangle)

由于不同浏览器的兼容性不用,shape 属性值建议使用缩写。

2、coords 详解

coords属性和shape属性搭配使用,后者表示区域的形状,前者则是这个区域的坐标。
图像左上角的坐标是 “0,0”。
(1)shape取值为 default 时(或者不写):整个区域,但实际应用中发现默认矩形并需要写坐标,coords取值为左上角和右下角的坐标, (x1,y1,x2,y2)
(2)shape取值为 rect 时:coords取值为左上角和右下角的坐标, (x1,y1,x2,y2)
(3)shape取值为 circ 时:coords取值为圆心坐标和半径, (x,y,r)
(4)shape取值为 poly 时:coords取值为顶点的坐标, (x1,y1,x2,y2,…,xn,yn),多边形会自动封闭,所以在列表的结尾不需要重复第一个坐标来闭合整个区域。

注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

3、target详解
  • _blank,在新窗口中打开被链接文档
  • _self,默认值。在相同的框架中打开被链接文档,
  • _parent,在父框架集中打开被链接文档。
  • _top,在整个窗口中打开被链接文档。
    例如
    比如网页A中镶嵌iframe了网页B,网页B又镶嵌iframe了网页C:
    如果网页C中链接网址D设置target=_parent,则跳将网页B去掉直接网页A中嵌入网页D;
    而如果网页C中target=_top ,则直接跳出所有iframe框架,直接转向D。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值