From zenoven on 2010-03-03 13:24:48
CSS Sprites技巧:单个图片插入多个链接
平时我们做网页的时候会用到img标签来插入图片，再结合a标签可以给图片加上链接，但是其实单独用a标签就可以实现这样的效果，而且可以在单个图片中插入多个链接。
本文的基本做法就是用CSS Sprites将多个图片合并为1个，用CSS中的background属性代替img标签，用background-position来实现多个图片链接的最终效果。
例如原来3个图片链接的HTML代码如下
[code lang="html"]
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
<a href="#"><img src="#" /></a>
[/code]
现在用CSS Sprites时HTML代码为
[code lang="html"]
<a id="a"href="#">链接名称1</a>
<a id="b"href="#">链接名称2</a>
<a id="c"href="#">链接名称3</a>
[/code]
CSS代码为
[code lang="css"]
#a,#b,#c{
display:block;
width:250px;
margin:5px auto;
text-indent:-999em;
background:url(img.png) no-repeat;
}
#a{
height:100px;
background-position:0 0;
}
#b{
height:90px;
background-position:0 -100px;
}
#c{
height:70px;
background-position:0 -190px;
}
[/code]
<img class="size-full wp-image-1244 aligncenter" title="css_sprites" src="http://www.zenoven.com/wp-content/2010/03/css_sprites.gif" alt="" width="250" height="260" />
注:本例中的图片为250*260(a,b,c的高度分别为100px,90px,70px)，我的小站这样做修改后的实际效果如下图，具体效果可以参看
http://www.zenoven.com首页右下角处的图片链接。
<img class="size-full wp-image-1244 aligncenter" title="css_sprites" src="http://www.zenoven.com/wp-content/themes/inove/img/organizations.png" alt="" width="250" height="260" />
那么有朋友要问，这样做的好处是什么呢？
1、3个图片合为1个，减少了HTTP请求数量，在图片大小没有大的变化时可以加快网页加载速度。
2、a标签中的<img />没有了，取而代之的是链接名称，有利于SEO。
3、DIV+CSS的一个要求是内容与表现形式的分离，这样做可以在不修改HTML的情况下直接通过修改CSS更换图片。
From 万戈 on 2010-03-03 14:41:51
木有看到效果嘛。。。
From zenoven on 2010-03-03 14:48:06
:(4): 有的啊，在首页右下角，我文章页的sidebar没显示
From 万戈 on 2010-03-03 14:51:58
哦哦，看到了，和我想象中的不一样
From 风云春秋博客 on 2010-03-03 14:59:18
技术文章 闪过 看不懂代码
From QiQBoY on 2010-03-03 15:00:30
这个方法很值得提倡。。 :(16):
From 老七 on 2010-03-03 19:05:51
不错。。很久没来。。
From 笨笨 on 2010-03-04 01:09:09
单个图片插入多个链接呵呵笨笨的话会用最笨的方法DW里面的热点功能。。。够傻吧
From 园子 on 2010-03-04 09:54:08
嘿嘿
这个效果不错哈。
From GEZ鸽子 on 2010-03-04 18:14:45
几个LOGO不错！ :(4):
From Jclyn on 2010-03-04 18:59:49
我一開始還在想
一個圖片連3個
那到底是打開哪一個
現在算是懂了
哈哈
From huangjun on 2010-03-05 09:53:28
嗯，这个效果就跟以前的map是一样的。
From 三七八蛋 on 2010-03-05 14:49:54
这个CSS效果要多应用，比如你的表情也可以这样做
From zenoven on 2010-03-05 20:38:07
其实也没啥的 :(4):
From zenoven on 2010-03-05 20:38:58
:(11): 我也是想尽办法加快网页打开速度
From zenoven on 2010-03-05 20:39:29
:(1): 呵呵，我也是很久没到处逛了 :(4):
From zenoven on 2010-03-05 20:40:44
只要能达到自己的效果就行了 :(16):
From zenoven on 2010-03-05 20:41:00
:(24): 夸奖了
From zenoven on 2010-03-05 20:41:24
:(4): 我也是找的
From zenoven on 2010-03-05 20:42:05
:(11): 把你弄迷糊了吧 :(18):
From zenoven on 2010-03-05 20:42:45
嗯 搜索引擎看到的是a标签，我们看到的是图片 :(24):
From zenoven on 2010-03-05 20:43:22
:(2): 表情这样实现不了吧，是动态的呢。。。
From 笨笨 on 2010-03-06 11:31:26
你的教程那才叫杠杠的。。
From China Wholesale on 2010-04-06 20:50:34
功能很强大，采用了CSS Sprites 技术，让我的网站速度快了一点，就这一点，意义是很大的，大大减少了向服务器Request！给网站服用器减压拉！再次感谢！
From 菠萝 on 2013-09-10 23:05:15
哈哈，这是个好方法，万戈说有 不同方法，让他过来说说
From 菠萝 on 2013-09-10 23:05:33
老万，说说你的方法，分享一下，一块收了