Adding alt tags to css rollover links, How To Options

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

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>

[Darin McGrew]

Yep, that's one of the problems with CSS image replacement techniques.

[NovaArgon]

Well what would you advise me to do?

[NovaArgon]

<td><a href="index.html" class="home" title="Back to the home page">Home</a></td>

[Darin McGrew]

I recommend against CSS image replacement techniques.

For link rollovers, use CSS to change just the background. Leave the link text as text.

Or, if you really must have an image of text for the link, then use an inline image with a transparent background, and put the alt text on that. Then use CSS to change the background image that shows through the transparent background of the inline image.

[NovaArgon]

Really it doesn't matter to me. I would just like to have my page so that if some blind guy does happen to come along he wont get stuck on the first page because you can't see the images.

Thats why I am just wanting some text that will work only if time images are not working. Maybe it can tie to the link insted of the image.

[pandy]

Smart choice. I've never dared to use image replacement. When all that started every technique presented turned out to cause accessibility or other problems in one situation or other. I also fail to see that these techniques offer any larger advantages, but I may be wrong there.

[NovaArgon]

Do you think that I should have left it with the javascript?

Because I still have that code. I kinda liked it better because the images instantly flash over. With the css it kinda flickers for a second the first time you roll it over. Like its not loading until its asked for or something.

This post has been edited by NovaArgon: Apr 20 2008, 11:37 PM

[pandy]

No. See Darin's reply above.

[Frederiek]

The animated background image is only downloaded upon hover. Maybe it flashes because its animated.

I suggested you could use CSS to swap the images (http://forums.htmlhelp.com/index.php?showtopic=5806), but I admit that I personally never use animated gifs, nor text images to do that. And the url to which I pointed you uses only one image to do the swap by changing the position of the background image in CSS. But I'm not so sure if you can do that with an animated gif, like you have now.

A solution might be to load the animated gifs as tiny images no one will notice (1 x 1 px). Or maybe even in a hidden or offscreen element.

Anyway, the accessibility problem remains. With the images turned off, one can only guess where the links are, as the link text is offscreen.

What you think is most important is up to you to decide.

[NovaArgon]

Thanks for all the help guys.

I'm just going to use the title tag and see how that goes.

[NovaArgon]

The animated background image is only downloaded upon hover. Maybe it flashes because its animated.

I suggested you could use CSS to swap the images (http://forums.htmlhelp.com/index.php?showtopic=5806), but I admit that I personally never use animated gifs, nor text images to do that. And the url to which I pointed you uses only one image to do the swap by changing the position of the background image in CSS. But I'm not so sure if you can do that with an animated gif, like you have now.

A solution might be to load the animated gifs as tiny images no one will notice (1 x 1 px). Or maybe even in a hidden or offscreen element.

Anyway, the accessibility problem remains. With the images turned off, one can only guess where the links are, as the link text is offscreen.

What you think is most important is up to you to decide.

Is there a way to make the images pre load?

[Darin McGrew]

Have you read the Fast Rollovers Without Preload article that Frederiek recommended?

[NovaArgon]

Have you read the Fast Rollovers Without Preload article that Frederiek recommended?

Let me give you guys a little detail and see if it explains things better

You may not use images of text for links on your site but 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 you guys review my site. Now I don't know anything about css so I only glanced over the link I just called up a friend and said hey man my code is out of date I need to have css link colors and css image rollovers .

Bam now I have css rollovers and link color.

Now don't think I jumped the gun on what one guy told me to do. I asked around a 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 didn't have javascript but I changed it anyway and the rollover is slower by a great deal but aside from that.

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 a very little bit of html code so all the css stuff is done by other people.

All of this started here when I wanted to get my page looked at by you guys because I think you know what you are doing. I was told you can't see my links because of the color. I didn't even change the default color because I had no links. Well it turns out you guys were right if your blind or something and don't use images you couldn't see the links at all I could hardly read them and I can see. So I use css to do the link colors. Job well done right? No because thats when I replace java with css and that completely wiped out the point of using css to do the link colors. Now it may not be done like it says in the link so I can't say for sure. I just say to my coder can do this and give him the link. Any ways 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.

[pandy]

I didn't follow that really (I'm tired and suffer from severe ESL), but lets try to break this down. If I understand you right it's like this...

A) you want to use the graphic buttons you have now,
B) you want a rollover effect and
C) you want the site to be accessible (the blind guys and all that).

Is that right? In that case a JavaScript rollover may very well be the best choice after all. Why? Because you can use alt texts and you avoid image replacement. All that happens without JS is that the rollover doesn't work. No big deal.

You can do it with CSS and get the alt texts too, but that means you have to use two inline images and toggle their display on and off when the link is hovered. That in turn means that without CSS people get two images for each link. Not so good.

[NovaArgon]

Pandy you Rock!

Thanks for explaining the differences to me. Is it more of personal opinion weather I go with javascript or css or is the css the better way to go? I can have my css guy make adjustments if he didnt do what it said in the link.

To me the code is a lot cleaner with the css

I think I am just going to keep the link at the bottom of the page for the forums and that be good enough. That way if someone that is blind is reviewing my page he wont know any different lol

This post has been edited by NovaArgon: Apr 21 2008, 12:53 PM

[pandy]

Pandy you Rock!

Don't I know it!

Well, if you want all three things I listed above you have no choice, really. It's JS for you. Or the other CSS option with two inline images...

[Darin McGrew]

You can do it with CSS and get the alt texts too, but that means you have to use two inline images and toggle their display on and off when the link is hovered. That in turn means that without CSS people get two images for each link. Not so good.

Yeah, I don't like showing both images to those with images but without CSS.

I think you can do it with only one inline image. You just need to use an inline image with a transparent background, and use CSS to make the background change when the pointer hovers. But if you want to completely restyle the image, then you'll need to make the whole inline image transparent, and put all the information in the background images. Those with images but without CSS need the inline image to make sense without the CSS backgrounds.

[pandy]

Yes, but as I understand it NovaArgon wants to use the images he already has, and that sort of narrows the field.

I don't think JS is inheritantly bad. In this case nothing bad happens if JS isn't available, so why not use it? Sometimes I think it has become an end in itself to use CSS instead of JS, no matter how many loops you have to jump through and if it degrades poorer than JS would...

[NovaArgon]

All of the images are transparent. Its just grey text in a cool font on one image and the other is grey text with cool font that has a wave animation.




The reason I am doing it this way is becuase I have been told that there is no way to allow a use 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.

@ Darin

Are you saying that if I can change the image that displays first
to one that has a solid background like thisthen the image that displays on hover will just appear over it?

This post has been edited by NovaArgon: Apr 21 2008, 02:11 PM