HTML <img>标签 创建图像映射
初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="poly" coords="23,58,8,59,40,70" alt="Venus" href="venus.htm">
</map> 该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)。 shape
1、rect 矩形
2、circle 圆形
3、poly 多边形
coords
1、距形:左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)
2、圆形:(圆心坐标为(X1,y1),半径为r)
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
HTML <img>标签 创建图像映射的更多相关文章
- HTML创建图像映射,布局,表单
来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...
- HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)
例子: <img src="planets.gif" width="145" height="126" alt="Plane ...
- HTML <map> 标签-创建带有可点击区域的图像映射
定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...
- 带有可点击区域的图像映射:HTML <map> 标签
实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...
- html 图像映射(一个图像多个连接)
以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...
- 图像映射map
<map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...
- 图像热点&图像映射
图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...
- 使用ZwMapViewOfSection创建内存映射文件总结
标 题: [原创]使用ZwMapViewOfSection创建内存映射文件总结 作 者: 小覃 时 间: 2012-06-15,02:28:36 链 接: http://bbs.pediy.com/s ...
- html 图像映射
个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...
随机推荐
- SpringMVC转发和重定向区别!
在servlet中,转发和重定向是由request和response完成的.两者之间的区别请看我之前的文章.那么在springMVC中是如何完成的呢? /**转发**/ @RequestMapping ...
- error: open of glibc-devel-2.12-1.132.el6.i686.rpm failed: 没有那个文件或目录
在安装qt的时候出现了错误: error: open of glibc-devel-2.12-1.132.el6.i686.rpm failed: 没有那个文件或目录 错误原因:缺少glibc-dev ...
- Kotlin入门第四课:简单工厂模式
Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...
- 如何为一个eclipse安装android环境
据说android已经不再支持android adt-bundle的开发环境了,所以如果继续使用的话,会不再更新 使用eclipse来安装android环境或者使用android studio 但是以 ...
- H3C交换机删除VLAN与其绑定端口配置
在系统视图下,执行 undo int vlan 2 undo vlan 2 可以删除vlan2的配置信息. 执行 undo vlan all 可以删除所有的vlan信息. 在vlan2视图下,执行: ...
- Django学习(四)---Admin配置
1)Admin: admin是django自带的功能强大的自动化数据管理界面 被授权的用户可以直接在Admin中管理数据库(增.删.改.查) Django提供了许多针对Admin的定制功能 2)配置A ...
- nodejs 实践:express 最佳实践 (一)
express 最佳实践 (一) 最近,一直在使用 nodejs 做项目,对 nodejs 开发可以说深有体会. 先说说 nodejs 在业务中的脚色,, 在 web同构 方面, nodejs 的优势 ...
- JS实现悬浮导航的制作--web前端
思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难 ...
- docker搭建zabbix
本次使用docker搭建zabbix的组合是mysql+docker+zabix-server 1 先安装数据库mysql docker run --name zabbix-mysql-server ...
- LInux基础命令分类
1. 命令的概念 命令的执行过程 系统第一次执行外部命令时Hash缓存表为空,系统会先从PTAH路径下寻找命令,找到后会将路径加入到Hasa缓存中,当再次执行此命令时会直接从Hash的路径下执行,如果 ...