GD Star Rating
loading...
loading...
平时我们做网页的时候会用到img标签来插入图片，再结合a标签可以给图片加上链接，但是其实单独用a标签就可以实现这样的效果，而且可以在单个图片中插入多个链接。
本文的基本做法就是用CSS Sprites将多个图片合并为1个，用CSS中的background属性代替img标签，用background-position来实现多个图片链接的最终效果。
例如原来3个图片链接的HTML代码如下
<a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a>
现在用CSS Sprites时HTML代码为
<a id="a"href="#">链接名称1</a> <a id="b"href="#">链接名称2</a> <a id="c"href="#">链接名称3</a>
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;
}
注:本例中的图片为250*260(a,b,c的高度分别为100px,90px,70px)，我的小站这样做修改后的实际效果如下图，具体效果可以参看http://www.zenoven.com首页右下角处的图片链接。
那么有朋友要问，这样做的好处是什么呢？
1、3个图片合为1个，减少了HTTP请求数量，在图片大小没有大的变化时可以加快网页加载速度。
2、a标签中的<img />没有了，取而代之的是链接名称，有利于SEO。
3、DIV+CSS的一个要求是内容与表现形式的分离，这样做可以在不修改HTML的情况下直接通过修改CSS更换图片。
哈哈，这是个好方法，万戈说有 不同方法，让他过来说说
loading...
功能很强大，采用了CSS Sprites 技术，让我的网站速度快了一点，就这一点，意义是很大的，大大减少了向服务器Request！给网站服用器减压拉！再次感谢！
loading...
这个CSS效果要多应用，比如你的表情也可以这样做
loading...
:(2): 表情这样实现不了吧，是动态的呢。。。
loading...
嗯，这个效果就跟以前的map是一样的。
loading...
嗯 搜索引擎看到的是a标签，我们看到的是图片 :(24):
loading...
我一開始還在想
一個圖片連3個
那到底是打開哪一個
現在算是懂了
哈哈
loading...
:(11): 把你弄迷糊了吧 :(18):
loading...
几个LOGO不错！ :(4):
loading...
:(4): 我也是找的
loading...
嘿嘿
这个效果不错哈。
loading...
:(24): 夸奖了
loading...
单个图片插入多个链接呵呵笨笨的话会用最笨的方法DW里面的热点功能。。。够傻吧
loading...
只要能达到自己的效果就行了 :(16):
loading...
你的教程那才叫杠杠的。。
loading...
不错。。很久没来。。
loading...
:(1): 呵呵，我也是很久没到处逛了 :(4):
loading...
这个方法很值得提倡。。 :(16):
loading...
:(11): 我也是想尽办法加快网页打开速度
loading...
技术文章 闪过 看不懂代码
loading...
其实也没啥的 :(4):
loading...
木有看到效果嘛。。。
loading...
:(4): 有的啊，在首页右下角，我文章页的sidebar没显示
loading...
哦哦，看到了，和我想象中的不一样
loading...
老万，说说你的方法，分享一下，一块收了
loading...