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

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

相关文章

来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

1670
来自专栏木子昭的博客

个人项目汇总多人在线聊天程序百度文库在线爬虫在线合成头像图虫网资源爬取双端适配优秀站点分享:

多人在线聊天程序 简介: 通过ajax实现多人在线匿名聊天,聊天过程中,可随时更换昵称,聊天人数无上限,后端为Django ? 在线地址:http://3q...

3065
来自专栏zhisheng

Java攻城狮是如何养成的?

经常逛知乎,收藏了不少学习方面的资源,以后有机会会慢慢的分享出来,让大家在学习的道路上少走些弯路。今天分享一篇文章《java攻城狮如何养成的?》,干货挺多的,,...

3044
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(二)

本文是“WordPress 开发微信小程序”系列的第二篇,本文记录的是开发“DeveWork极客”小程序v1.1 的过程。一如既往,目标读者为了解WordPre...

2197
来自专栏web前端教室

前端组件“可编辑表格”,怎么设计才好呢?先得有思路

大家好,今天是0618,今天的先行者计划的主题是“可编辑表格”的第一次课。 既然是一个前端组件,那么就涉及到如何设计的问题。我们不是单纯的要实现一个可编辑表格...

1945
来自专栏ytkah

小程序“自定义关键词”功能的常见问答

  我们知道小程序可以通过线下扫码、公众号、好友分享、长按小程序码、搜索小程序名称来找到,现在又多了一个新方式——小程序后台新增自定义关键词功能:已发布小程序的...

3378
来自专栏技术小黑屋

Android中处理Touch Icon的方案

苹果的Touch Icon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些Touch Icon的网页链接更加和Native...

711
来自专栏决胜机器学习

设计模式专题(九) ——外观模式

设计模式专题(九) ——外观模式 (原创内容,转载请注明来源,谢谢) 一、概述 外观模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义了...

33612
来自专栏知晓程序

开发微信小程序,看这篇文章就够了 | 官方文档解读

1123
来自专栏HTML5学堂

metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现...

41711

扫码关注云+社区