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=" ...
随机推荐
- 查看Linux机器名
uname -a hostname vim /etc/sysconfig/network
- css 按钮凹陷的感觉
.login-btn{ margin-top: 60rpx !important; background-color:transparent !important; width: 40%; margi ...
- ubuntu 程序后台运行几个方法
51 1. 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 2. 将1中的命令放在 “()”中, 即 “(./myjob & ...
- mysql 常用命令导入导出修改root密码
MySQL 忘记口令的解决办法如果 MySQL 正在运行,首先杀之: killall -TERM mysqld. 启动 MySQL :mysql --skip-grant-tables & / ...
- BZOJ5252 八省联考2018林克卡特树(动态规划+wqs二分)
假设已经linkcut完了树,答案显然是树的直径.那么考虑这条直径在原树中是怎样的.容易想到其是由原树中恰好k+1条点不相交的链(包括单个点)拼接而成的.因为这样的链显然可以通过linkcut拼接起来 ...
- 关于min_25筛的一些理解
关于min_25筛的一些理解 如果想看如何筛个普通积性函数啥的,就别往下看了,下面没有的(QwQ). 下文中,所有的\(p\)都代表质数,\(P\)代表质数集合. 注意下文中定义的最小/最大质因子都是 ...
- 金三银四:蚂蚁金服JAVA开发面试题及答案之一面(持续更新
一面 1.自我介绍.自己做的项目和技术领域 开放题 2.项目中的监控:那个监控指标常见的有哪些? 答:CPU.内存.IO 等等.建议下载个nmon工具,里面有各个指标. 数据库:Mysql(缓存命中. ...
- Android 判定手机是否root
Android获取手机root的状态 package com.app.demo; import java.io.File; import android.app.Activity; import an ...
- Elasticsearch中使用groovy脚本处理boolean字段的一个问题
Elasticsearch中使用groovy脚本获取文档的bool字段值时,得到的值是字符的 'T' 或者 'F' ,而不是bool值 true 和 false . 比如文档中有一个字段是 { &qu ...
- Spark安装与介绍
1. Scala的安装 注意点:版本匹配的问题, Spark 1.6.2 -- Scala2.10 Spark 2.0.0 -- Scala2.11 https://www.scala-lang.or ...