CSS Image Replacement, The How To

October 10th, 2007

CSS Image replacement is very affective for style sheet based themes. The advantage of using image replacement is compatibility for screen readers or non-image based browsers that can not use my .css document. If I did not do this, then non-image based browsers would not be able to navigate my site easily and effectively.

This is what it looks like to image enabled browsers

headerexample.jpg


This is what it would look like to non-image based browsers

headerexample21.jpg



The Logo, Method 1

As you can see I did the main logo image and the menu for the header, but I did both with two separate methods. I will discuss the logo first. It is created using two css IDs.

The first ID is a the image wrapper.

PLAIN TEXT
CSS:
  1. #logoimage {height:100px;width:341px;background: url(../images/logo.gif) no-repeat;}

Note maybe the most important part of this is the height/width and no repeat tagged on the end.

The second ID belongs to the actual a href linking code.

PLAIN TEXT
CSS:
  1. #logolink { display:block; width:341px;height:100px;text-indent: -999px;overflow: hidden;}

Note the height/width are exactly the same as the image and my text-indent is a negative value because the logo is on the left side of the screen.

The Html

PLAIN TEXT
HTML:
  1. <div id="logoimage"><a href="http://www.lobolinks.com" id="logolink" title="Lobo Links Web Directory">Lobo Links Web Directory</a></div>

The Menu, Method 2

Next up is the Menu, which uses one css ID and one css class. This method has very similar characteristics to the first and works basically the same way. Just less actual html code is used.

This is the css used for the home button, but the same methods apply to all of your menu buttons.

PLAIN TEXT
CSS:
  1. #btn-home{
  2.     display:block;
  3.     float:left;
  4.     background: #001e2d url(../images/btn-home.gif) no-repeat;
  5.     height:100px;
  6.     width:66px;
  7. }

Note maybe the most important part of this is the height/width and no repeat tagged on the end.

PLAIN TEXT
CSS:
  1. .btn-home { display:block; width:66px;height:100px;text-indent: 999px;overflow: hidden;}

Note the height/width are exactly the same as the image and my text-indent is a positive value because the menu is on the right side of the screen.

The Html

PLAIN TEXT
HTML:
  1. <a href="http://www.lobolinks.com" id="btn-home" class="btn-home" title="Home">Home</a>

Thats It! Let me know what you think.

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Mixx
  • Reddit
  • Technorati

Related Post

This entry was posted on Wednesday, October 10th, 2007 at 8:33 pm and is filed under How To, Internal SEO. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Posted in How To, Internal SEO •