图片映射(HTML 标签)这么拽,小伙伴们都明白吗?

电脑杂谈  发布时间:2020-02-14 14:00:45  来源:网络整理

it世界图片_it经理人世界_世界it经济

在一些购物网站,我们总能看到一张大图,上面布满充满诱人的礼物,当我们轻轻地用键盘单击一下,就跳转到这个孩子的页面。 对于这个神奇的功能,身边的小伙伴们往往都被惊艳了。要是无法学会这招技能,那该多好啊,以后再也不用去找美工切图,并且也不用为兼容这些浏览器而发愁了。

其实it世界图片,对于这个看起来神奇的功能,实现出来却是相当的容易。只应该使用HTML的<img>标签、<map>标签和<area>标签能够推动这个超强的功能。但是即使想要把照片映射做的挺强大的话,那也必须颇下一番功夫。不过最近小编已经整理好了攻略,你只应该本文的方法,就可以轻松掌握这个技能。

首先,将想要显示的照片,使用HTML标签将其显示在页面中it世界图片,代码很简单,不做过多解释。但是这儿有一个关键的并不常用的属性,那就是usemap,它指定了你应选用的地图,也就是使用那种地图模式来展现里面的链接。示例代码如下:

世界it经济_it世界图片_it经理人世界

<img src="planets.jpg" border="0" usemap="#imgMap" alt="Planets" />

接下来,定义Map地图,并将Map分块,用以区分不同的内容区域。

Map地图由<map>标签和<area>标签组成。<map>标签的定义比较简洁,只需声明id和name即可,因为不同浏览器识别的标签不一样,所以id和name二者缺一不可。<area>标签因为不常见,下面的图例展示了各个属性所代表的的准确意义。

世界it经济_it世界图片_it经理人世界

定义可点击区域(对鼠标敏感的区域)的坐标

定义此区域的目标 URL。

定义区域的形状。

it经理人世界_it世界图片_世界it经济

规定在何处打开 href 属性指定的目标 URL。

Map地图的样例代码如下:

<mapfont-size:12px;line-height:16px;">imgMap"font-size:12px;line-height:16px;">imgMap">

世界it经济_it世界图片_it经理人世界

<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 上登录一个账号,就能够通过可视化软件对照片进行剪裁,获取裁剪的照片的坐标。


本文来自电脑杂谈,转载请注明本文网址:
http://xinshanjie.com/a/jisuanjixue/article-140741-1.html

    相关阅读
    发表评论  请自觉遵守互联网相关的政策法规,严禁发布、暴力、反动的言论

    热点图片
    拼命载入中...