Reply
Adding alt text to a css rollover image
Old 04-20-2008, 09:30 PM Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

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

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>
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
When You Register, These Ads Go Away!
     
Old 04-21-2008, 12:05 AM Re: Adding alt text to a css rollover image
wayfarer07's Avatar
Will Work for Talkupation

Posts: 579
Name: Abel Mohler
Location: Asheville, North Carolina USA
Alt text only applies to <image> tags as well as <input type="image"> It isn't valid for images added via CSS through background: properties...
__________________
Go FREELANCE <=====||=====> Hire Me
wayfarer07 is offline
Reply With Quote
View Public Profile
 
Old 04-21-2008, 12:26 AM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
Well maybe you know of a workaround that would help me out.

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?
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
Old 04-21-2008, 12:40 AM Re: Adding alt text to a css rollover image
wayfarer07's Avatar
Will Work for Talkupation

Posts: 579
Name: Abel Mohler
Location: Asheville, North Carolina USA
If you are trying to accommodate blind users, the title="" tag will probably suit your needs. This has the result of displaying the text every time the mouse cursor is over the element, however. Since this is what IE does with alt text in most cases, however, this is not a huge deal.

I don't know everything about screenreaders, but am guessing that different readers react to the title tag differently.

You may want to read about the <acronymn> tag also, although I've never used it personally. It isn't meant for images but has multiple uses.
__________________
Go FREELANCE <=====||=====> Hire Me
wayfarer07 is offline
Reply With Quote
View Public Profile
 
Old 04-21-2008, 01:15 AM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
Thanks for the help

I have it set up that way and Im happy lol
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
Old 04-21-2008, 02:20 AM Re: Adding alt text to a css rollover image
Webmaster Talker

Posts: 623
Location: Kokkola, Finland
"You may want to read about the <acronymn> tag also, although I've never used it personally. It isn't meant for images but has multiple uses."

well just one: for acronyms!
davemies is offline
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 04-21-2008, 03:53 AM Re: Adding alt text to a css rollover image
Banned

Latest Blog Post:
How to Sell a Used Car
Posts: 154
Try to check it in w3school.com if it is applicable in css.
x3mario is offline
Reply With Quote
View Public Profile Visit x3mario's homepage!
 
Old 04-21-2008, 05:26 AM Re: Adding alt text to a css rollover image
Gilligan's Avatar
Dead Like Me

Posts: 1,572
Name: Stefan
Location: London, UK
Quote:
Originally Posted by wayfarer07 View Post
Alt text only applies to <image> tags as well as <input type="image"> It isn't valid for images added via CSS through background: properties...
Sorry, i think you mean <img>
Gilligan is offline
Reply With Quote
View Public Profile
 
Old 04-21-2008, 09:21 AM Re: Adding alt text to a css rollover image
chrishirst's Avatar
Super Moderator

Posts: 11,897
Location: Blackpool. UK
Quote:
Originally Posted by wayfarer07 View Post
If you are trying to accommodate blind users, the title="" tag will probably suit your needs. This has the result of displaying the text every time the mouse cursor is over the element, however. Since this is what IE does with alt text in most cases, however, this is not a huge deal.

I don't know everything about screenreaders, but am guessing that different readers react to the title tag differently.

You may want to read about the <acronymn> tag also, although I've never used it personally. It isn't meant for images but has multiple uses.
Absolutely NOT NOT NOT the title TAG!!!!

http://www.candsdesign.co.uk/article...es-and-values/

Use the title ATTRIBUTE for the anchor element
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 04-21-2008, 10:32 AM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
Thats what I have done now isn't it?
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
Old 04-21-2008, 10:36 AM Re: Adding alt text to a css rollover image
LadynRed's Avatar
Super Moderator

Posts: 6,072
Location: Tennessee
Chris's POINT is "title" is NOT A TAG, it is an ATTRIBUTE - there IS a difference.
Quote:
If you use a text only browser you cant hear any of my links because when the images are turned off nothing displays.
That is a classic example of why you should NOT use images for navigation !
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-21-2008, 11:56 AM Re: Adding alt text to a css rollover image
Webmaster Talker

Posts: 623
Location: Kokkola, Finland
from the op's code there are text links there!?
can you post a link to the page so we can see exactly what you mean
davemies is offline
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 04-21-2008, 12:18 PM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
www.drysnot.com

You may not use text links on your site so I can see where it is easy for you to say that. To be honest text images are about the only thing I can design so I'm using them lol.

At first I was using javascript to do the roll overs and everything was working great. I get some one to review my site and they said

Quote:
"While you're add it, you don't have to rely on Javascript to swap images. CSS can be used for that too. See Fast Rollovers Without Preload."
Now I don't know anything about css so I never even looked at the link I just called up a friend and said hey man my code is out of date I need to have css rollovers.

Bam I have css rollovers.

Now dont think I jumped the gun on what one random guy told me to do. I asked around abit bit first.

http://www.webdeveloper.com/forum/sh...d.php?t=179418

The guy says yea there is no down side only difference is that if someone doesn't have javascript the images wont rollover and with css that wont matter. Well I have never met anyone that didnt have javascript but I changed it anyway and the rollover is slower by a great deal.

I am just trying to get good code thats all. I want to be able to show my web page somewhere and everyone who looks at can't find any crap to say bad about it. Now on the other hand I only know alittle bit of html code so all the css stuff is done by other people.

All of this started here http://forums.htmlhelp.com/index.php?showtopic=5806 I wanted to get my page looked at by some people that know what they are talking about and the first thing I was told is that you can't see my links because of the color. I didn't even change the color of them because I had no links. Well it turns out the guy is blind or something and doesn't use images. So I use css to do the link colors. Job well done right? No because thats when the next guy tells me to replace java with css and that completely wiped out the point of using css to do the link colors. So I made a link just for the fun of it at the bottom of my page.

I don't really care if its javascript or css I'm just tying to find the right way to do it BUT if the right way to do the rollover images makes like 10 other things wrong I will take the lesser of the two evils.

Thanks for all the help and advice you guys are giving me. I hope I didn't over do it on the detail but I think it might show ya what I'm trying to do.

Last edited by Snot : 04-21-2008 at 01:25 PM.
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
Old 04-21-2008, 02:19 PM Re: Adding alt text to a css rollover image
LadynRed's Avatar
Super Moderator

Posts: 6,072
Location: Tennessee
Quote:
To be honest text images are about the only thing I can design so I'm using them lol.
What's wrong with making BLANK buttons, then using REAL TEXT for your menu, with the image as background ???
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-21-2008, 03:00 PM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
The reason I am doing it this way is because I have been told that there is no way to allow a user to instantly download and install the font I am using on my page.

So I had two options I can use plan font all over my page or use images.

If you guys know of a workaround for the font that would be cool but I think I have already asked here somewhere.

This page is never going to have a lot of content on it. I like to think of it as a splash page with a few links on it. I really want the apperance to stand out on it and I can't know what font all the people that visit my site have and without a way to give them an option of getting the font my page is using I don't know what else to do.

Thanks for trying to help me out with this
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
Old 04-21-2008, 05:37 PM Re: Adding alt text to a css rollover image
LadynRed's Avatar
Super Moderator

Posts: 6,072
Location: Tennessee
Quote:
I have been told that there is no way to allow a user to instantly download and install the font I am using on my page.
Correct, there is no way.

I find your site rather disgusting, so I'm not going there to even look .. sorry.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-21-2008, 06:50 PM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
Wow thats harsh I'm sorry you feel that way but thats just my domain name. My site is not really about snot or anything. Its about jobs and employment. I didn't expect anyone to find it so offensive.

I hope its nothing personal. If something I have said has offended you I'm sorry.
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!
 
Old 04-21-2008, 11:47 PM Re: Adding alt text to a css rollover image
Snot's Avatar
Skilled Talker

Posts: 85
Well I think I have been over thinking the whole thing anyways I just left all my rollover images the same and added a footer that has the links all over my site. That way I still get the rollover effect I want with my really cool images and I am also accessible to the blind.
Snot is offline
Reply With Quote
View Public Profile Visit Snot's homepage!