博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5 图片热点area,map的用法
阅读量:7130 次
发布时间:2019-06-28

本文共 743 字,大约阅读时间需要 2 分钟。

 今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形、圆形、三角形区域都可以进入其他网页!

    

html5 图片热点area,map的用法

 

    下面,我们来实例介绍map,area这些标签的用法!

 

    1,制作矩形热点

html5 图片热点area,map的用法

    (1),shape标签表示热点的形状,有矩形(rectangle),圆形(circle),多边形(polygon)和整个图片(default)

    (2),coords是每个形状的坐标,不同形状坐标表示不同!上面矩形的坐标(x1,y1,x2,y2),其中(x1,y1)是矩形左上角的坐标,(x2,y2)是矩形右下角的坐标

 

    2,制作圆形热点

html5 图片热点area,map的用法

    圆形的坐标(x,y,radius),其中(x,y)是圆心的坐标,radius是圆的半径

 

    3,制作多边形热点(下面是三角形)

html5 图片热点area,map的用法

    多边形的坐标(x1,y1,x2,y2,x3,y3,...)有多少组(x,y)坐标就有几个角,也就是说,多边形每一个角的坐标都要在coords中!

    注意:

    1,coords里面的坐标是按照图片大小来的,不是按照浏览器窗口大小来的!所以图片的左上角的坐标是(0,0),右下角是(图片的长,图片的宽)

    2,一般这种确定你想要的区域的坐标,单靠眼睛看是不可能看出来的,所以你需要借助截屏工具来确定区域的坐标!打开截屏工具,从图片的左上角开始拉到你想要的那个点,显示的长和宽就是这个点的坐标!

想要每天及时获取王业楼的个人博客更新的内容吗?赶快添加微信公众号“ly89cn”,或者扫描下方的二维码吧!

本文来源于,本文地址:

欢迎分享本文,转载请注明本文出处和地址

转载于:https://www.cnblogs.com/ly89cn/p/4964004.html

你可能感兴趣的文章
libvirt kvm云主机监控
查看>>
Apache配置静态缓存
查看>>
URL欺骗
查看>>
Zabbix图像集中展示Graphtrees开源
查看>>
《聚爆Implosion》性能精析:这是我们测过性能最棒的手游,没有之一!
查看>>
Linux GPT分区格式磁盘的相关操作
查看>>
DCD DSR DTR RTS CTS 的含义
查看>>
OpenTest:教你在自动化脚本中增加选择文件的支持
查看>>
关于安装ASPNetExtMVC2008.exe 后不出现MVC项目的问题
查看>>
强烈推荐ISCSI target和initiator软件
查看>>
企业服务经验总结--服务器安全细则2
查看>>
python中时间的加n和减n运算
查看>>
软件开发人员应具备的基本素质 !!!
查看>>
无线运维——J2ME和WAP运维方式的优缺点
查看>>
生产环境Shell脚本Ping监控主机是否存活(多种方法)
查看>>
关于SQLServer2000中触发器的使用——多行数据提交
查看>>
commons-fileupload 1.3.1 上传测试
查看>>
红帽集群套件RHCS四部曲(概念篇)
查看>>
TFS配置(二)
查看>>
GeoServer地图开发解决方案(五):基于Silverlight技术的地图客户端实现
查看>>