The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

4 Pages V  1 2 3 > »   
Reply to this topicStart new topic
> Adding alt tags to css rollover links, How To
NovaArgon
post Apr 20 2008, 08:31 PM
Post #1


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 20 2008, 08:44 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,344
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Yep, that's one of the problems with CSS image replacement techniques.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 20 2008, 08:48 PM
Post #3


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



Well what would you advise me to do?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 20 2008, 08:55 PM
Post #4


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



<td><a href="index.html" class="home" title="Back to the home page">Home</a></td>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 20 2008, 09:00 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,344
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 20 2008, 09:22 PM
Post #6


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 20 2008, 11:01 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 20 2008, 11:35 PM
Post #8


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2008, 02:20 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



No. See Darin's reply above. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 21 2008, 02:52 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 21 2008, 09:20 AM
Post #11


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



Thanks for all the help guys.

I'm just going to use the title tag and see how that goes.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 21 2008, 11:48 AM
Post #12


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



QUOTE(Frederiek @ Apr 21 2008, 03:52 AM) *

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2008, 11:51 AM
Post #13


WDG Member
********

Group: Root Admin
Posts: 8,344
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Have you read the Fast Rollovers Without Preload article that Frederiek recommended?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 21 2008, 12:07 PM
Post #14


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



QUOTE(Darin McGrew @ Apr 21 2008, 12:51 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2008, 12:33 PM
Post #15


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 21 2008, 12:47 PM
Post #16


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2008, 01:10 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



QUOTE(NovaArgon @ Apr 21 2008, 07:47 PM) *

Pandy you Rock!

Don't I know it! IPB Image

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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 21 2008, 01:34 PM
Post #18


WDG Member
********

Group: Root Admin
Posts: 8,344
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(pandy @ Apr 21 2008, 10:33 AM) *
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2008, 01:44 PM
Post #19


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,773
Joined: 9-August 06
Member No.: 6



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
NovaArgon
post Apr 21 2008, 01:55 PM
Post #20


Always Need To Learn A New Code
*****

Group: Members
Posts: 265
Joined: 10-June 07
From: South Carolina
Member No.: 3,057



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.

IPB Image
IPB Image

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
IPB Imageto one that has a solid background like thisIPB Imagethen the image that displays on hover will just appear over it?

This post has been edited by NovaArgon: Apr 21 2008, 02:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

4 Pages V  1 2 3 > » 
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th July 2021 - 11:18 PM