Study 2 —— 图片热点区域
标记<map>和<area>
<img src="图片" usemap="#名称">
<map id="#名称">
<area shape="rect" coords="10,10,100,100" href="#">
<area shape="circle" coords="120,120,50" href="#">
<area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
</map> 语法格式:
(1)插入图片,增加图片属性usemap,说明该图像是热区映射图像,属性值必须以“#”开头,如#img.
那么上面的代码就应该为<img src="图片地址" usemap="#img">
(2)<map>标记只有一个属性id,其作用是为区域命名,属性值必须与<img>标记的usemap属性值相同。
修改上述代码为:<map id="#img">
(3)<area>标记主要是定义热点区域的形状及超链接,它有三个相应的属性:
1.shape属性,控件划分区域的形状,其取值有3个,分别是rect(矩形),circle(圆形)和poly(多边形)
2.coords属性,控制区域的划分坐标:
a.如果shape属性取值为rect,那么coords的设置值分别为矩形的左上角x、y坐标点和右下角x、y坐标点,单位为像素
b.如果shape属性取值为circle,那么coords的设置值分别为圆形圆心x、y坐标点和半径值,单位为像素
c.如果shape属性取值为poly,那么coords的设置值分别为多边形各个点的x、y坐标点,单位为像素
3.href属性是为区域设置超链接的目标,设置值为“#”时,表示为空链接
Study 2 —— 图片热点区域的更多相关文章
- HTML基础(二)——表单,图片热点,网页划区和拼接
一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...
- HTML:图片热点 网页划区 表单
图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" u ...
- HTML静态网页 图片热点、框架、表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...
- HTML · 图片热点,网页划区,拼接,表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 网页的拼接: 在一个网络页面内,规划出多 ...
- HTML--表单,图片热点,网页划区和拼接
一.图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: <img src="/ usemap="longzhu"> ...
- html5 图片热点area,map的用法
今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! ...
- HTML--2图片热点,网页划区,拼接
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个网络 ...
- HTML图片热点、网页划区、拼接、表单
一.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 二.网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 三.网页的拼接: ...
- 3月20日html(二) 图片热点,网页划分,表单
1.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src=" usemap="map" name=" ...
随机推荐
- 在VS2017上对C++项目进行单元测试
操作系统:win10 VS2017安装:http://www.cnblogs.com/Metak/p/7471671.html 参考博客: http://blog.csdn.net/lovehaiho ...
- Resolve Missing artifact Issue in maven
https://jingyan.baidu.com/article/d621e8da0a5b192864913f79.html
- Failed while installing JAX-RS (REST Web Services) 1.1. org.osgi.service.prefs.BackingStoreException: Resource '/.settings' does not exist.
https://issues.jboss.org/browse/JBIDE-10039?_sscc=t https://stackoverflow.com/questions/16836832/fai ...
- SpringMVC一例 是否需要重定向
在ASP.NET MVC下: return view("List") 和 return RedirectToAction("List") 百度知道的最佳答案: ...
- hive数据导入Sqoop工具
下载Sqoop ,直接解压缩;然后导入2个环境变量 1.导入oracle数据库中表emp的数据到hive表中 1.导入到HDFS中 $ sqoop import --connect jdbc:mysq ...
- Delphi下EasyGrid使用体会
最近在编写软件的时候,非常需要一款支持多表头的StringGrid控件,朋友介绍使用EasyGrid控件,这款控件大概从04年开始就没有再更新,网上有关与它的资料也较少.但是通过其demo,此软件还是 ...
- BZOJ4025 二分图(线段树分治+并查集)
之前学了一下线段树分治,这还是第一次写.思想其实挺好理解,即离线后把一个操作影响到的时间段拆成线段树上的区间,并标记永久化.之后一块处理,对于某个节点表示的时间段,影响到他的就是该节点一直到线段树根的 ...
- Sigma Function LightOJ - 1336 (约数和为奇数)
题意: 求1-n中约数和为偶数的数的个数 记住一个定理:...平方数 及其 平方数的2倍 的约数和为奇数 then....减啦 证明: ....我jiao着人家写的很详细,so 看看人家写的吧! 转 ...
- eclipse svn同步资源库时忽略某些不需要提交文件类型和文件夹
项目开发中,开发人员经常用SVN来管理代码,在和服务器同步时,每次都看到一堆.class,.log,target等文件,这样很不舒服. 解决方法: 打开:window-->preferences ...
- java freemarker导出word时添加或勾选复选框
最近项目导出word碰到一个需求,要求根据数据动态的决定word里的复选框是否勾选, 公司导出word用的是freemarker,相比较其他技术,freemarker可以很容易的控制输出样式, 在wo ...