图像热点链接

简介: 图像热点链接

指定图片某块区域加超链接 :使用map标签可以给指定图片某块区域加超链接
使用方法:
例:




1)在html文件中插入一个图片

属性:
usemap:将图像定义为客户端图像映射

2)在html文档中插入一个map标签
A. map标签:定义客户端的图像映射,图像映射是带有可点击区域的图像
B. 为map标签设置id属性and name属性,属性值相同

3)为img标签加上usemap属性,属性值为map标签的id/name
语法:
说明:
img中的usemap属性可引用map中的id或name属性(由浏览器决定)所以需要添加id和name两个属性

4)在map标签内嵌套一个或者多个area标签来实现给指定区域加超链接
area标签:定义图像映射内部区域area标签始终嵌套在map标签内部
语法:


属性:
shape:定义区域形状
属性值:rect-正方形
circ-圆形
poly-多边形
coords:定义可点击区域的坐标(xpx,ypx,npx)
alt:定义此区域的替换文本
target:设置超链接的打开方式

矩形:shape="rectangle、rect",coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。

圆形:shape="circle",coords="x,y,z"
x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),z 是以像素为单位的圆形半径。

多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

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

相关文章
|
2月前
|
开发工具 数据安全/隐私保护 Android开发
视觉智能平台常见问题之图片解析出的水印图判断是自己添加的水印图如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
|
2月前
|
机器学习/深度学习 编解码 API
视觉智能平台常见问题之分割后的图片尺寸会变得比较大如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
|
2月前
|
机器学习/深度学习 生物认证 API
视觉智能平台常见问题之只有一张原图设置输出图片格式如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
|
2月前
|
机器学习/深度学习 算法 开发工具
视觉智能平台常见问题之视频封面输出的图片会出现过曝如何解决
视觉智能平台是利用机器学习和图像处理技术,提供图像识别、视频分析等智能视觉服务的平台;本合集针对该平台在使用中遇到的常见问题进行了收集和解答,以帮助开发者和企业用户在整合和部署视觉智能解决方案时,能够更快地定位问题并找到有效的解决策略。
|
2月前
|
机器学习/深度学习
YOLOv5改进 | 检测头篇 | CLLAHead分布焦点检测头(全网独创首发)
YOLOv5改进 | 检测头篇 | CLLAHead分布焦点检测头(全网独创首发)
93 1
|
2月前
|
机器学习/深度学习
YOLOv8改进 | 检测头篇 | CLLAHead分布焦点检测头(全网独创首发)
YOLOv8改进 | 检测头篇 | CLLAHead分布焦点检测头(全网独创首发)
64 0
|
2月前
|
机器学习/深度学习
YOLOv5改进 | 检测头篇 | CLLAHead分布式焦点损失检测头(全网独家首发)
YOLOv5改进 | 检测头篇 | CLLAHead分布式焦点损失检测头(全网独家首发)
44 0
【影像配准】目标影像在参考影像中的自动定位与裁剪(附有完整代码)
【影像配准】目标影像在参考影像中的自动定位与裁剪(附有完整代码)
|
机器学习/深度学习 传感器 算法
【图像检测】基于DeepPupil Net 实现眼中心定位附matlab代码
【图像检测】基于DeepPupil Net 实现眼中心定位附matlab代码
|
数据采集
百度图片参数分析
爬虫这几年应用场景越来越广泛,数据越来越重要。今天vike和你们一起来看看百度图片参数。本文仅供技术交流,如有侵权请联系作者删除
358 0
百度图片参数分析