HTML5图片映射——<map>+<area>
来源:互联网 发布:电脑查询快捷键软件 编辑:程序博客网 时间:2024/06/04 18:18
在一些购物网站,我们总能看到一张大图,上面铺满充满诱惑的礼品,当我们轻轻地用鼠标单击一下,就跳转到这个宝贝的页面。 对于这个神奇的功能,身边的小伙伴们往往都被震惊了。要是能够学会这招技能,那该多好啊,以后再也不用去找美工切图,并且也不用为兼容这种浏览器而发愁了。
接下来,定义Map地图,并将Map分块,用以区分不同的内容区域。
其实,对于这个看起来神奇的功能,实现起来却是相当的容易。只需要使用HTML的<img>标签、<map>标签和<area>标签就能实现这个强大的功能。但是如果想要把图片映射做的很强大的话,那也需要颇下一番功夫。不过今天小编已经整理好了攻略,你只需要本文的步骤,就可以轻松掌握这个技能。
首先,将想要显示的图片,使用HTML标签将其显示在页面中,代码很简单,不做过多解释。但是这里有一个关键的并不常用的属性,那就是usemap,它指定了你要选择的地图,也就是使用哪种地图方式来展示里面的链接。示例代码如下:
<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />
Map地图由<map>标签和<area>标签组成。<map>标签的定义非常简单,只需声明id和name即可,因为不同浏览器识别的标签不一样,所以id和name二者缺一不可。<area>标签因为不常用,下面的图表展示了各个属性所代表的的确切含义。
属性
值
描述
coords
坐标值
定义可点击区域(对鼠标敏感的区域)的坐标。
href
URL
定义此区域的目标 URL。
shape
default
rect
circ
poly
定义区域的形状。
target
_blank
_parent
_self
_top
规定在何处打开 href 属性指定的目标 URL。
Map地图的示例代码如下:
<map name="imgMap" id="imgMap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
到此为止,我们就可以轻松创建自己的图片地图了。然而,对于如何图片中某个元素的坐标对很多小伙伴来说,仍然是一个难题,因为普通的看图软件根本无法查看每个元素的坐标位置。在这里,给大家推荐一款在线工具:Image-Maps 。我们只需在Image-Maps 上注册一个账号,就能够通过可视化工具对图片进行剪裁,获取裁剪的图片的坐标。
0 0
- HTML5图片映射——<map>+<area>
- html5 图片热点area,map的用法
- html —— map元素与area元素制作图像映射
- 图片的热点链接(img map area)
- map area
- HTML图片热区map area的用法
- 图片上按钮特效 热点链接(img map area)
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- HTML图片热区map area的用法整理
- HTML图片热区map area的用法
- HTML图片热区map area的用法
- HTML 图片映射,一个图片映射多个链接<map>
- HTML 图片映射<map>标签整理
- VC++2013 conditional breakpoint
- UVALive 3938 "Ray, Pass me the dishes!"
- 解决Oracle 11g在用EXP导出时,空表不能导出
- 0121程序练习
- 【VC++DLL动态链接库编程】DLL动态链接库的原理讲解(2)
- HTML5图片映射——<map>+<area>
- [Day02]Angular 2教程:02 Angular 2 的灵魂
- JS方法——字符串匹配/替代方法
- Java获取集合泛型的类型上的注解
- TCP/IP模型
- python windows下一些较难安装的类库
- rmi参数
- 基于主元素思想的householder正交法解方程组
- activiti工作流的web流程设计器整合视频教程 SSM和独立部署