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

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?

Recommended Answers

All 4 Replies

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>
</ul>

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

#main_nav .link1 { 
background-image("link_1.jpg"); 
no-repeat; 
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">
  <li>
    <a href=""><img src="link_1.jpg" alt="This is link 1" /></a>
  </li>
</ul>

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.