In my latest Wordpress theme, I am trying to get all my social
bookmarking icons into one image and use them as a sprite. There will
a normal graphic and a hover graphic for each one. I looked at a post
in themeforest.net
http://blog.themeforest.net/wordpress/add-social-bookmarks-to-your-wordpress-theme/
and it uses an img tag inside an anchor tag.
This is the markup with the Wordpress php tags
:
<ul id="socialicons">
<li class="digg"><a
href="http://www.facebook.com/sharer.php?u=<?
php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share
on Facebook">Share on Digg</a></li>
<li class="reddit"><a
href="http://www.facebook.com/sharer.php?
u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>"
title="Share on Facebook">Share on Reddit</a></li>
<li class="facebook"><a
href="http://www.facebook.com/sharer.php?
u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>"
title="Share on Facebook">Share on Facebook</a></li>
</ul>
Here is the CSS used:
ul#socialicons {margin:0;list-style-type:none}
ul#socialicons li {margin:0; background: url(images/
bookmarkingsprite.png) no-repeat top left;}
.facebook {background-position: -314px 0;}
.reddit {background-position: -488px 0;}
.digg { background-position: -195px 0; }
What I am trying to do is use unordered lists with list items being
each for an image that changes upon hover, and links somewhere. I
can't really get it right though. Any ideas how this could be achieved?
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
