CSS Code

How to replace text links with images using CSS

Anyone who knows anything about SEO knows that it's most advantageous to use text links for the navigation of a website. Using text increases a search engine's ability to crawl your site and identify the content properly, because it can read the text (spiders can't read text within images). However, the aesthetic appeal of using images is obviously greater, you can have effects and aliasing, rather than just plain old boring text.

So, why not have both? With this bit of CSS code, you can use your text links, and then replace them in browsers with images. The spiders are happy, they can read the text. The viewers and website owners are happy, because the website looks pretty.

Let's say you had a navigation layer with the id of "nav". In there you had a link to "products", and a link to "blog".

Here's what your HTML looks like:


<div id="nav">
  <a href="/products/" id="nav-products">Products</a>
  <a href="/bog/" id="nav-blog">Blog</a>
</div>

You want to replace the text with images that are 30px high. This is the most efficient way to do it:


#nav a {
    padding: 30px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:30px;
}
#nav-products { background-image: url("/images/nav/products.gif"); width: 75px; }
#nav-blog { background-image: url("/images/nav/blog.gif"); width: 50px; }
Share

6 Comments

  1. This really save page size, I still can have hover effect with live content module. For live content to work I have to use img src, but I gave src as very small fully transparent file. Thank you.

  2. This would almost work for my situation, but, I need to replace in text links with a graphic instead of a navigation item. So any link in a DIV with needs to get replaced with a generic arrow for instance.

  3. I tried this but the images floated on top of the text instead of covering it. Even when I moved the images down with the text they floated behind, not in front of it. I tried playing with z-index but that didn't work either. Any ideas?

  4. Hi, I'm afraid it doesn't work as expected. The text still appear below the image background. Tested in Firefox and Chrome.

  5. I tried this code, same as Phil and Stephan. The Text still appear and cannot covering it.

  6. He forgot a part of the css under the #nav a, overflow is set to hidden, meaning any text that isnt within the dimensions of the element are not going to display, therefore the missing piece of code which will stop the text from displaying is "text-indent: -9999px;"

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image