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=" ...
随机推荐
- Selenium Grid的Java调用方法
java -jar selenium-server-standalone-.jar -role hub explorer http://192.168.1.173:4444/grid/console ...
- HTML使用button的一个小坑
https://www.w3schools.com/TAGs/att_button_type.asp Definition and Usage The type attribute specifies ...
- Axios插件和loading的实现
axios插件就是一个ajax插件 axios具有ajax的所有方法如 get post delete put等等的方法 使用时只需要引入即可 如import Axios form 'axios' 不 ...
- 转《js闭包与内存泄漏》
首先,能导致内存泄漏的一定是引用类型的变量,比如函数和其他自定义对象.而值类型的变量是不存在内存泄漏的,比如字符串.数字.布尔值等.因为值类型是靠复制来传递的,而引用类型是靠类似c语言中的指针来传递的 ...
- js輸出
js訪問html的某個元素,使用document.getElementByID(); document.write()僅僅向文檔輸出內容,如果在頁面已經加載后輸出,原來頁面的內容會被覆蓋. docum ...
- python系列-1 字符串操作
1.去除空格 str.strip():删除字符串两边的指定字符,括号的写入指定字符,默认为空格 >>> a=' hello ' >>> b=a.strip() ...
- BZOJ3786星系探索——非旋转treap(平衡树动态维护dfs序)
题目描述 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球没有依赖星球. ...
- BZOJ4200 NOI2015小园丁与老司机(动态规划+上下界网络流)
一看上去就是一个二合一的题.那么先解决第一部分求最优路线(及所有可能在最优路线上的线段). 由于不能往下走,可以以y坐标作为阶段.对于y坐标不同的点,我们将可以直接到达的两点连边,显然这样的边的个数是 ...
- bzoj 2212 : [Poi2011]Tree Rotations (线段树合并)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2212 思路:用线段树合并求出交换左右儿子之前之后逆序对的数量,如果数量变小则交换. 实现 ...
- 洛谷P3345 [ZJOI2015]幻想乡战略游戏(动态点分治,树的重心,二分查找,Tarjan-LCA,树上差分)
洛谷题目传送门 动态点分治小白,光是因为思路不清晰就耗费了不知道多少时间去gang这题,所以还是来理理思路吧. 一个树\(T\)里面\(\sum\limits_{v\in T} D_vdist(u,v ...