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

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

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

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

  怎么样?学会了吗?本文部分参考资料

  

目录
相关文章
爬取图片,以及对图片筛选,以及切换系统背景图片
爬取图片,以及对图片筛选,以及切换系统背景图片
|
Web App开发 JavaScript 开发者
知乎图片怎么老是显示不出来
知乎图片怎么老是显示不出来
2407 0
知乎图片怎么老是显示不出来
|
开发者
图片与文字的修改| 学习笔记
快速学习图片与文字的修改。
图片与文字的修改| 学习笔记
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
198 0
如何利用ps工具,裁量咱的素材小图标和如何获取到大小合适的素材图标呢(各自图标素材集中于一张png图片上)
|
数据采集
百度图片参数分析
爬虫这几年应用场景越来越广泛,数据越来越重要。今天vike和你们一起来看看百度图片参数。本文仅供技术交流,如有侵权请联系作者删除
451 0
百度图片参数分析
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
181 0
如何将链接生成二维码或者二维码图片输出到console?
qrcode2console github地址 链接生成二维码输出到console或者是二维码图片输出到console 安装 go get -u github.com/Han-Ya-Jun/qrcode2console 示例 func TestNewQRCode2ConsoleWithUrl(t *testing.
2276 0
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1938 0