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

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

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

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

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

  

目录
相关文章
|
9月前
|
编解码 iOS开发
图片,视频上传&视频内容旋转
图片,视频上传&视频内容旋转
|
11月前
|
编解码 开发工具 Android开发
.9图片的那点事儿
.9图片的那点事儿
145 0
|
计算机视觉
【图片操作】生成动态图片
动态图片我们使用的还是比较频繁的,平时的表情包有很多动图。今天我们要做的就是自己制作动态图片,其实就是将视频转换成动图,操作起来非常简单。下面我们就来看看如何实现吧。
512 0
|
Linux 数据安全/隐私保护 Windows
Stegosuite,图片隐写术
版权声明:转载请注明出处:http://blog.csdn.net/dajitui2024 https://blog.csdn.net/dajitui2024/article/details/79396511 ...
1346 0
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
没有图片增加默认图片,有图片路径,但是没有图片文件解决方案
126 0
|
存储 缓存 JSON
Class 6 图片内容安全(图片鉴黄)
阿里云高校计划视觉AI五天训练营教程
2253 0
|
缓存 Android开发
图片
●图片加载,缓存,处理 Picasso (一个强大的图片下载与缓存的库) Fresco (一个用于管理图像和他们使用的内存的库) Glide (一个图片加载和缓存的库,使用的App有:网易新闻) Picasso-transformations (...
1337 0