通过图片定位给一张图片添加多个链接
我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片中,然后通过图片定位的方式来调用,这样所有的小图片总共只请求一次。跟着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这个是小图片所在的位置
另外一种方法:通过地图标签给图片加链接
怎么样?学会了吗?本文部分参考资料

加微信交流
标签:
图片定位
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架