HTML图片映射
2024-08-31 03:52:15
<img>图片映射
<map>与<area>一起使用来定义一个图像映射(一个可点击的链接区域).
<img src="cat.jpg" alt="圣诞猫" usemap="#catmap">
<map name="catmap">
<area shape="" coords="" href="" target="_blank" alt="">
<area shape="" coords="" href="" target="_blank" alt="">
</map>
<map>中name属性:
name属性 给map一个名字用来查询,这个属性是必须的,值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同,如果id属性也被添加,name属性和id属性的值必须相同。
<area>元素必须拥有一个<map>元素祖先元素,但不一定是直接的父元素。只允许有开始标签不允许有结束标签。
<area>中坐标从左上角(0,0)点起,向右x轴,向下y轴,(中心点获取可用qq的截图功能,从左上角开始截图,长宽即为中心点坐标)
shape属性:“circle”、“rect”、“poly”,
<area shape="circle" coords="中心点,圆的半径(204,511,50)" href="" alt="">
<area shape="rect" coords="矩形左上角点的坐标,右下角点的坐标(287,486,359,545)" href="" alt="">
<area shape="poly" coords="分别列出多边形每个顶点的坐标(x1,y1,x2,y2,x3,y3)" href="" alt="">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片映射</title>
</head>
<body>
<img src="cat.jpg" alt="圣诞猫" usemap="#catmap">
<map name="catmap">
<area shape="circle" coords="204,511,40"
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497764763&di=f515456a13384605e140751e455323d9&imgtype=0&src=http%3A%2F%2Fpic21.photophoto.cn%2F20111125%2F0017030594470929_b.jpg"
target="_blank" alt="">
<area shape="rect" coords="287,486,359,545"
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497911660&di=59b640621e3342303cfbbef44685075a&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3414111129%2C2073799617%26fm%3D214%26gp%3D0.jpg"
target="_blank" alt="">
</map>
</body>
</html>
最新文章
- 时时获得高德地图坐标 http://lbs.amap.com/console/show/picker
- SVN仓库删除最近的提交,还原到某日期以前的版本(svn仓库 删除最近几次更改)
- Git恢复reset --hard丢失的文件
- NSDictionary、NSMutableDictionary的基本用法
- 下拉列表联动显示(Car表) 三级联动
- spring--资源--4
- 冬天 苹果笔记 macbook pro 消除静电的方法
- mybatis 详解(十)------ 逆向工程
- opensuse使用zypper安装软件
- Spring Data REST API集成Springfox、Swagger
- 5.01-requests_auth
- hashMap源码解析(四)
- 面向服务的体系架构(SOA)
- [LeetCode]题15:3Sum
- debian7(wheezy)升级安装mercurial hg最新版2.8-RC,解决tortoisehg2.9.2不能使用。
- elasticsearch控制台中文乱码和jvm内存大小调整。 解决办法:
- 20165318 2017-2018-2 《Java程序设计》第二周学习总结
- 三、spring成长之路——springIOC容器详解(上)
- Python函数变量和返回值
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题