Jump to content

How to add alt text to css rollover images?


NovaArgon

Recommended Posts

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.