NovaArgon Posted April 21, 2008 Share Posted April 21, 2008 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> Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 21, 2008 Share Posted April 21, 2008 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.. Quote Link to comment Share on other sites More sharing options...
NovaArgon Posted April 21, 2008 Author Share Posted April 21, 2008 How do I add the text to it to begin with? Quote Link to comment Share on other sites More sharing options...
NovaArgon Posted April 21, 2008 Author Share Posted April 21, 2008 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? Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 21, 2008 Share Posted April 21, 2008 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; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.