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=" ...
随机推荐
- eclipse webproject activiti
https://stackoverflow.com/questions/42858723/activiti-eclipse-maven-project-to-dynamic-web-project-a ...
- activiti 选人的实现
activiti默认是不带有选人的功能的,它默认的是在调用complete 方法的时候自动根据下一个节点的 assignee属性或者candidate属性 设置下一节点的候选人或者 assginee. ...
- [转帖]盖国强:Oracle 路线图
http://www.eygle.com/archives/2018/12/oracle_database_release_19c_confirm.html 盖总的blog 里面讲了下相关的内容. 很 ...
- jquery ajax中data属性详解
$.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...
- mysql 由decimal 引起的 Warning: Data truncated for column
今天在使用python 库mysqldb的rawsql的时候遇到一个问题(其实并不是mysqlbean引起的) cls.raw_sql('update {table} set available_am ...
- sql优化问题笔记(mysql)
相信大家平时面试都会遇到这个问题:平时你都是怎么对sql进行调优的? 此篇文章相当于一个随便笔记,根据朋友们的聊天记录整理而成,如有不对,请指正! 注意:这篇是以mysql整理的 查看sql计划分析 ...
- Lodop调整打印项输出顺序 覆盖与层级
Lodop中的打印项,如果有输出在同一位置,或部分位置重叠的地方,打印项之间是怎么覆盖的呢?在JS里,按照Lodop语句打印项先后的执行顺序,先执行的先输出,后执行的后输出,如果有后面的打印项和前面的 ...
- solr string类型表示不支持分词
solr string类型表示不支持分词
- 一本通1587【例 3】Windy 数
1587: [例 3]Windy 数 时间限制: 1000 ms 内存限制: 524288 KB 题目描述 原题来自:SCOI 2009 Windy 定义了一种 Windy 数:不含前 ...
- Spark_RDD之RDD操作简介
1.转化操作 转化操作是返回一个新的RDD的操作,我们可以使用filter()方法进行转化.举个使用scala进行转化操作的例子. def main(args: Array[String]): Uni ...