How to add alt text to css rollover images?

[NovaArgon]

Is there any way to do do this? Right now if you view the page without images no text displays over over the links.

 

<table align="center">
<tr>
<td><a href="index.html" class="home">Home</a></td> 
<td><a href="forums/index.php" class="forum">Forum</a></td>
<td><a href="snotshop.html" class="snotshop">SnotShop</a></td> 
<td><a href="contact.html" class="contact">Contact</a></td> 
<td><a href="links.html" class="links">Links</a></td> 
</tr></table>

[ToonMariner]

You add the title attribute to your anchor...

 

The 'best' method (or at least the one I prefer to use is to give 'image' links a bit of accessibility treatment.  Set the background anchor to the image of choice - make anchor a block element and set width and height according to image size - 'hide' the text by either text-indent: -9999px; OR placing anchor text in a span which you can position: relative; left: -9999px.

 

If you use the latter you have to do a bit more magic in 'compliant browsers' to hide the text-decoration..

[NovaArgon]

How do I add the text to it to begin with?

[NovaArgon]

It used to be alt text that I needed but not that the images for my links are in the css nothing shows up when images are disabled.

 

If you use a text only browser you cant hear any of my links because when the images are turned off nothing displays.

 

I can still click the links if i know where they are but there is know way to tell what link I am clicking. It only matters to blind users and I have no clue if I will have any but I don't want one to come along and never make it off my home page.

 

This text doest not need to display unless the images are disabled.

 

Any ideas?

[ToonMariner]

YES! Use the images as a background-image... Just like I said in my first reply...

 

Set the background of the link (anchor tag) to the image of your choice - give it a width and height (make sure its a block level element - display: block; or float: left;) and hide the text using one of the two methods I stated previously.  Give the link tag a title...

 

eg.

<ul id="main-nav">
<li><a href="/a/page.html" id="linka" title="This shows on hover after a while">The Link Text</a></li>
<li><a href="/another/page.html" id="linkb" title="This shows on hover after a while">The 2nd Link Text</a></li>
</ul>

 

css...

ul#main-nav li
{
float: left;
}

ul#main-nav li a
{
display: block;
text-indent: -9999px;
}

a#linka
{
background: transparent url(path/to/imagea.jpg) no-repeat 0 0;
}

a#linkb
{
background: transparent url(path/to/imageb.jpg) no-repeat 0 0;
}