<ul id="main_nav">
  <li><a href=""><img src="link_1.jpg">This is link 1</a></li>

Basically link_1.jpg is a button that I want to use to replace 'This is link 1' but what css command do I give to 'This is link 1' to make it disappear from the webpage im designing?

9 Years
Discussion Span
Last Post by MidiMagic

There are many ways of image replacement. My favorite way:

Your html with a couple of bits added / removed.

<ul id="main_nav">
<li><a href="#"  class="link1"><span>This is link 1</span></a></li>

And the css to put in your css file or between style tags.

#main_nav .link1 { 
width: 80px; // Replace with image width
height: 50px; // Replace with image height

#main_nav span {
display: none;

This is the Fahrner Image Replacement method. (FIR)

Although beware of accessibilty issues this may cause, screen readers will not pick up the text so if your designing with a potetial audiance of blind / sight impared viewers in mind do not use this method.


It's easy, even with accessibility:

<ul id="main_nav">
    <a href=""><img src="link_1.jpg" alt="This is link 1" /></a>

Not many screen readers actually use the alt tag because the alt tag was at one point massivly missused for seo.


That is NOT a good reason to disable a function. The W3C Requires the alt attribute for accessibility.

The only other thing I can think of is a kludge:

Make the color of the text and the background the same color.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.