www.webdeveloper.com
Results 1 to 6 of 6

Thread: Adding alt text to a css rollover image

  1. #1
    Join Date
    Nov 2007
    Location
    FL
    Posts
    71

    Adding alt text to a css rollover image

    Is there any way to add alt tags to this? if so how?

    Code:
    <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>

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    "alt" is only text to be displayed in place of an image if the image is not available. If you are looking for a popup text description (which IE does with alt, but this is incorrect), then the "title" attribute is what you want :
    Code:
    <td><a href="index.html" class="home" title="Back to the home page">Home</a></td>

  3. #3
    Join Date
    Nov 2007
    Location
    FL
    Posts
    71
    Alt is what I want but the images are in css so I don't know how to do it.

    If you use a text only browser you cant hear any of my links because when the images are turned off and in the css 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. You will see what I mean if you turn your images off and refresh my page.

    www.drysnot.com

    Any ideas?

  4. #4
    Join Date
    Nov 2007
    Location
    FL
    Posts
    71
    Quote Originally Posted by Centauri
    "alt" is only text to be displayed in place of an image if the image is not available. If you are looking for a popup text description (which IE does with alt, but this is incorrect), then the "title" attribute is what you want :
    Code:
    <td><a href="index.html" class="home" title="Back to the home page">Home</a></td>

    You know I think your advice is the best. a screen reader should pick that up regardless of weather or not someone can see it without doing a mouse over.

    I'm going to go with it

    Thanks for all your help

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    As there is actual text in the link, screen readers will read that text ok.
    Code:
    <td><a href="index.html" class="home" title="Back to the home page">Home</a></td>
    To get a true images-off-css-on compatible menu, you need to nest the images over top of thetext with another absolutely-positioned element, and it won't work if the images have transparent areas.

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'm quite fond of this method: http://meyerweb.com/eric/css/edge/popups/demo.html

    This uses a "span" inside of the "a" with "display:none;" (which *might* be not-so-good for indexing??). I wonder if if instead of "display:none;", it be positioned negatively off of the page (still works for SEARCH 'bots), and then, correctly re-positioned for the on-hover psuedo-state... hmm... I might have to try this..
    Last edited by WebJoel; 04-21-2008 at 07:40 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles