通过图片定位给一张图片添加多个链接

  我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片中,然后通过图片定位的方式来调用,这样所有的小图片总共只请求一次。跟着ytkah来试试吧

  设计好图片,上传。我们先确定所要的小图片元素的位置和面积,可以用photoshop来查找,也可以通过下面这个小工具来实现:

  http://www.w3school.com.cn/tiy/t.asp?f=html_ismap

  修改图片地址,在<img>位置把图片url粘贴进去,提交代码。请把鼠标移动到图像上,看一下状态栏的坐标如何变化。**/html_ismap.html?86,130,86是横坐标x的值,130是竖坐标y,移动鼠标,这两个参数都在变。

  以这篇文章为例微信那些年走过的开放之路,我们要在一些位置加上链接,比如微信小店那个位置,查看源代码

<a style="width: 225px; height: 60px; position: absolute; left: 145px; top: 260px;" title="微信小店" href="http://www.cnblogs.com/ytkah/p/3760339.html"> </a>

  width 225px和height 60px这个是微信小店图片大小,left 145px和top 260px这个是小图片所在的位置

  另外一种方法:通过地图标签给图片加链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

CSS实现按钮的两张图片的同步出现

      通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现css图片的预加载: <...

1969
来自专栏DannyHoo的专栏

xib适配

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1202
来自专栏娱乐心理测试

关于jQuery的浅谈学习

1354
来自专栏mukekeheart的iOS之旅

iOS模拟器使用

  在iOS开发过程中一直都是使用模拟器进行调试,在模拟器上有很多不适应的地方,但是其实在模拟器上也有很多其他的功能,在本文中主要对模拟器的一些基本功能进行总结...

1083
来自专栏破晓之歌

AI-icon制作 原

805
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

2542
来自专栏Youngxj

给你的博客文章加入”展开/收缩功能‘’

2562
来自专栏互联网杂技

一些好用的jquery技巧

1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to to...

3296
来自专栏DannyHoo的专栏

iOS中将图片保存到自定义相册中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1792
来自专栏Jerry的SAP技术分享

Fiori里花瓣的动画效果实现原理

Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成。另一种是下图的3/4个圆环不断旋转的效果。

2409

扫码关注云+社区