I decided to combine the idea of fixed networking icons and rollover .png images. I love rollover images because they’re interactive without the insane amount of code that usually comes with animating actions. I’ve made social media “tabs” to use for this because I’m on a bit of a tab kick lately.

The “tabs” look like this.

And here is the download for the images I use at this demo page.

I won’t claim to be the most astute at explaining rollover images, but the gist of it is rather simple, really.

One image file contains two images: the image you see when your mouse isn’t hovering over the image, and the image that appears while your mouse is hovering over the image, or the image “underneath” the top image. You simply write code that unveils the lower image.

First place this in your CSS document:

/*************************
HOVER TABS
**************************/
.hovertabs {
z-index: 5000;
width: 1100px;
min-height: 42px;
list-style: none;
margin-left: auto;
margin-right: auto;
text-decoration: none;
position: fixed;
bottom: 0px;
left: 5px;
}
.hovertabs ul {
list-style-type: none;
}
.hovertabs li {
float: left;
}
.hovertabs a {
display: block;
height: 0;
padding-top: 42px;
line-height: 0;
text-indent: -4000px;
background-repeat: no-repeat;
text-decoration: none;
}
li.facebooktab, li.facebooktab a {
width: 132px;
background: url(‘/images/facebook-hover.png’);
}
li.twittertab, li.twittertab a {
width: 132px;
background: url(‘/images/twitter-hover.png’);
}
li.linkedintab, li.linkedintab a {
width: 132px;
background: url(‘/images/linkedin-hover.png’);
}
li.rsstab, li.rsstab a {
width: 132px;
background: url(‘/images/rss-hover.png’);
}
li.diggtab, li.diggtab a {
width: 132px;
background: url(‘/images/digg-hover.png’);
}
li.flickrtab, li.flickrtab a {
width: 132px;
background: url(‘/images/flickr-hover.png’);
}
li.stumbletab, li.stumbletab a {
width: 132px;
background: url(‘/images/stumble-hover.png’);
}
li.sharetab, li.sharetab a {
width: 132px;
background: url(‘/images/share-hover.png’);
}
.hovertabs li {
background-position: 0px -42px;
background-repeat: no-repeat;
}
.hovertabs a:hover {
padding-top: 42px;
background: none;
}

Now add this to code to your php document. I added it in mine right after the footer div.

You’ll want to adjust the “width: 1100px;” bit depending on how many icons you use, but that’s it. Make sure your images are in the right folder, add your urls and tweak the text more to your liking, e.g. “Follow Me on Twitter”, and you’re done!

If my explanation of .png rollovers isn’t sufficient, this is a good tutorial and it will start you creating your own rollover images.

You may share this site's content if you link back to the original entry with credit to © Lydia Ann Lee. Merci beaucoup!

Unrelated posts: