We all love using images on our pages. They add that 'Je ne sais quoi' to our meal. But what happens when we want that image to link to another webpage. Most often, the average user would try to put an image (example: a logo) inside an anchor tag. Finishing it off by giving it an alt attribute, in the case that the image doesn’t show for whatever earthly reason.

I know what you're thinking: I'm not an average user, buddy! So I say: 'Good on you mate!'

Let's improve and evolve our ways, shall we? I'll help you brush up on your CSS skills and show you how to replace regular text with images. But now, why go through the trouble of replacing text with an image? Well, just like the title of my blog article states, search engines like google, yahoo and others love text. Their results put more emphasis on text rather than alt tags in images.

Here are some of the better ways to do that:

1. The FIR (Fahrner Image Replacement) Technique
2. The Leahy/Langridge Technique
3. The Off The Screen Technique

The example will be using is a link which will be replaced by an image using 3 different ways. All of which have their advantages.

Let’s demonstrate these techniques by making an image hyperlinked.

The FIR Technique:

Description: Text that’s placed inside the span tag gets hidden through CSS

HTML:

  <div class="logo">
    <a href="#"><span>Type One</span></a>
  </div>

CSS:

  background: url(../img/logo.gif) 0 0 no-repeat;
  display: block;
  width: 148px;
  height: 36px;

The Leahy/Langridge Technique:

Description: This involves padding the height of the image and setting overflow hidden to hide the text. Also, we’re setting the height to 0 for most browsers, then

HTML:

  <div class="logo">
    <a href="#">Type One</a>
  </div>

CSS:

  background: url(../img/logo.gif) 0 0 no-repeat;
  display: block;
  height: 0px !important;
  overflow: hidden;
  padding: 36px 0 0;
  width: 148px;

The Off The Screen Technique:

Description: The simplest of them all IMHO. Text is driven far off the screen.

HTML:

  <div class="logo">
    <a href="#">Type One</a>
  </div>

CSS:

  background: url(../img/logo.gif) 0 0 no-repeat;
  display: block;
  height: 36px;
  width: 148px;
  text-indent: -9999px;

The decision is yours to pick your favorite. Mine personally is the Leahy/Langridge Technique. Very useful when you have to link an image. Also note that this technique not only works with anchors, but also with any container.