This post teaches you how to replace CSS text links with an image and an image hover state.

An example can bee seen here (the icons above the main image)

Before doing this it is a good idea to preload your images with javascript to avoid the get lag that occurs when mouses over the link for the first time.

First lets set up the HTML

<p id="icons">
<a href="#" class="enlarge">enlarge</a>
<a href="#" class="avatarit">avatar it</a>
<a href="#" class="dolike">i like it</a>
<a href="#" class="dontlike">don't like it</a>
<a href="#" class="favorite">favorite</a>
</p>

Note that we gave the paragraph an ID and each anchor tag has its own specific class

Lets move onto the CSS

p#icons a{width: 67px; height:21px; text-indent:-9000px; display:block; float:left; margin-right:4px; margin-bottom:4px; }
p#icons a.enlarge{ background:url(http://kilroylives.com/images/buttons/enlarge.gif) top left no-repeat; }
p#icons a.dolike{ background:url(http://kilroylives.com/images/buttons/likeit.gif) top left no-repeat; }
p#icons a.dontlike{ background:url(http://kilroylives.com/images/buttons/dontlike.gif) top left no-repeat; }
p#icons a.avatarit{ background:url(http://kilroylives.com/images/buttons/avatar.gif) top left no-repeat; }
p#icons a.favorite{ background:url(http://kilroylives.com/images/buttons/favorite.gif) top left no-repeat; }
p#icons a.enlarge:hover { background:url(http://kilroylives.com/images/buttons/enlarge-over.gif) top left no-repeat; }
p#icons a.dolike:hover { background:url(http://kilroylives.com/images/buttons/likeit-over.gif) top left no-repeat; }
p#icons a.dontlike:hover { background:url(http://kilroylives.com/images/buttons/dontlike-over.gif) top left no-repeat; }
p#icons a.avatarit:hover { background:url(http://kilroylives.com/images/buttons/avatar-over.gif) top left no-repeat; }
p#icons a.favorite:hover { background:url(http://kilroylives.com/images/buttons/favorite-over.gif) top left no-repeat; }

Notice the first line of CSS I set all the anchor tags in the paragraph to a certain height and width. I did this because all my icons were the same. If you images vary, use individual height and width sizes in the individual link classes. Most likely all your images will have the same height, so use that first line to shave some code.

Also in that first link I set display to block. Doing this allows me to have the text I wrote in the anchor tags to be negative indented so it isn't seen by the common user. Doing so make it legible to the seeing impaired which is Section 508 compliant and good in general for search engines!

Setting display to block forces each link to break down, so float is set to left to have them show up on the same line.

Each anchor class has a background field, this is where you put the image you want to load. under the anchor classes :hover state, put in the hover image. If you wish not to have a hover image remove the :hover line.

It is good to preload the images you use because there will be lag from the CSS loading the image for the first time. Learn to preload with javascript here.