一张图片完成多个收藏按钮的制作

类似的收藏按钮制作方法有很多，比如占面积很小的JS制作方式，但是，我认为html的加载更快一点。下面用一张图片实现多个站点收藏按钮的制作：

首先，制作一张类似下边的图片，注意按钮的大小要一致，比如我的这张里面所有的按钮大小是20 x 20像素：

当然，你可以使用我的这张。不论你是使用我的还是自己制作图片，注意把图片保存为一个特定的名字比如xx.gif。然后准备一张空白的18x18像素的gif透明图片命名为yy.gif。

然后，预先定义一下按钮的样式：

#links{clear:both;margin:20px 0;text-align:center;}
#links a, #links a:hover, #links a:visited{background:#fff; border:none; }
#delicious{background:url(xx.png) 0px 0px no-repeat}
#digg{background:url(xx.png) -20px 0px no-repeat}
#technorati{background:url(xx.png) -40px 0px no-repeat}
#baidu{background:url(xx.png) -60px 0px no-repeat}
#furl{background:url(xx.png) -80px 0px no-repeat}
#reddit{background:url(xx.png) -100px 0px no-repeat}
#newsvine{background:url(xx.png) -120px 0px no-repeat}
#spurl{background:url(xx.png) -140px 0px no-repeat}
#yahoo{background:url(xx.png) -160px 0px no-repeat}
#diglog{background:url(xx.png) -180px 0px no-repeat}
#fark{background:url(xx.png) -200px 0px no-repeat}
.sc-tagged{width:16px;height:16px;border:1px solid #999; padding:2px; margin:3px}

最后，是在页面中要加入按钮的地方插入以下代码：

<div id="links">
<A target="_blank" href="http://del.icio.us/post?url=页面地址&amp;title=文章标题" rel="nofollow" title="收藏本文到delicious"><IMG class=sc-tagged id=delicious src="yy.gif"></A> <A target="_blank" href="http://digg.com/submit?phase=2&url=页面地址&title=文章标题&bodytext=文章摘要&topic=world_news" rel="nofollow" title="收藏本文到digg"><IMG class=sc-tagged id=digg src="yy.gif"></A> <A target="_blank" href="http://technorati.com/cosmos/search.html?url=页面地址" rel="nofollow" title="查看technorati中本包含本文链接的文章"><IMG class=sc-tagged id=technorati src="yy.gif"></A> <A target="_blank" href="http://cang.baidu.com/do/add?it=文章标题&iu=页面地址&dc=&fr=ien#nw=1" rel="nofollow" title="收藏本文到baidu收藏"><IMG class=sc-tagged id=baidu src="yy.gif"></A> <A target="_blank" href="http://furl.net/storeIt.jsp?t=文章标题&amp;u=页面地址" rel="nofollow" title="收藏本文到furl"><IMG class=sc-tagged id=furl src="yy.gif"></A> <A target="_blank" href="http://reddit.com/submit?url=页面地址&amp;title=文章标题" rel="nofollow" title="收藏本文到reddit"><IMG class=sc-tagged id=reddit src="yy.gif"></A> <A target="_blank" href="http://www.newsvine.com/_tools/seed&amp;save?u=页面地址&amp;h=文章标题" rel="nofollow" title="收藏本文到newsvine"><IMG class=sc-tagged id=newsvine src="yy.gif"></A> <A target="_blank" href="http://www.spurl.net/spurl.php?v=3&amp;title=文章标题&amp;url=页面地址" rel="nofollow" title="收藏本文到spurl"><IMG class=sc-tagged id=spurl src="yy.gif"></A> <A target="_blank" href="http://synergy2.search.yahoo.com/myresults/bookmarklet?u=页面地址&amp;t=文章标题" rel="nofollow" title="收藏本文到yahoo"><IMG class=sc-tagged id=yahoo src="yy.gif"></A> <A target="_blank" href="http://cgi.fark.com/cgi/fark/edit.pl?new_url=页面地址&amp;new_comment=文章标题" rel="nofollow" title="收藏本文到fark"><IMG class=sc-tagged id=fark src="yy.gif"></A> <A target="_blank" href="http://www.diglog.com/submit?url=页面地址&title=文章标题" title="收藏本文到diglog"><IMG class=sc-tagged id=diglog src="yy.gif"></a>
</div>

对于MT用户，只需在文章页面加入上述代码，并把其中的页面地址替换成：<$MTEntryPermalink$>；文章标题替换成<$MTEntryTitle encode_url="1"$>；文章摘要替换成<$MTEntryExcerpt$>就可以了。

至此，我的按钮制作过程讲解完成，效果见下面。
以此类推，通过修改图片和相关代码，可以增加或减少按钮的个数和种类。

标签：tool