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

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

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

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 animage using 3 different ways. All of which have theiradvantages.

Let’s demonstrate these techniques by making an imagehyperlinked.

The FIR Technique:

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

HTML:

Type One
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:
Type One
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:
Type One
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.