<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?

10 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.