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

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

相关文章

来自专栏FreeBuf

逆向工厂(二):静态分析技术

* 本文原创作者:追影人,本文属FreeBuf原创奖励计划,未经许可禁止转载 前言 [逆向工厂]第一章节中介绍了逆向技术的相关基础知识,其中提到逆向的两种形式:...

1868
来自专栏java一日一条

从Java String实例来理解ANSI、Unicode、BMP、UTF等编码概念

一切的谜都解开了!在写这篇随笔之前,我的心情只能用金田一每次破案后的这句台词来表达。

351
来自专栏偏前端工程师的驿站

前端魔法堂——异常不仅仅是try/catch

1103
来自专栏守候书阁

js关键词变色,数组打乱,数组去重的实现和封装

今天,把自己之前封装过的一部分小功能操作分享出现,都是一些可以说是比较常用,实现起来比较简单,代码又比较少的一些功能或操作,比如关键词变色,数组打乱,数组去重等...

602
来自专栏程序猿DD

第二章 正则表达式位置匹配攻略

第二章 正则表达式位置匹配攻略 正则表达式是匹配模式,要么匹配字符,要么匹配位置。请记住这句话。 然而大部分人学习正则时,对于匹配位置的重视程度没有那么高。 本...

17910
来自专栏玄魂工作室

如何学python-第六课 流程控制-IF,ELSE,条件语句

在上一篇文章里,我们介绍了流程控制的概念,并介绍了布尔类型。今天,我们会把上节课学到的东西与 if、else结合起来使用。 条件判断语句 条件判断语句会根据语句...

3288
来自专栏deepcc

javascript 中的 delete

3398
来自专栏数据小魔方

左手用R右手Python系列之——表格数据抓取之道

在抓取数据时,很大一部分需求是抓取网页上的关系型表格。 对于表格而言,R语言和Python中都封装了表格抓取的快捷函数,R语言中XML包中的readHTMLTa...

3566
来自专栏生信技能树

R for Data Science(十二)

一直觉得编程能力好的人都会写函数,我对R语言写函数能力比较差,就学了这一章节,拆分如何写函数以及为什么写函数 例如我们看一下这个代码

802
来自专栏丁科的专栏

pytorch 学习笔记之编写 C 扩展

在之前的文章中,我们已经了解了如何自定义 Module。这篇主要讲解pytorch利用 CFFI 进行 C 语言扩展。包括两个基本的步骤(docs):编写 C ...

8010

扫描关注云+社区