A better way to do things.

[Snot]

I would like to know what you guys think of my css rollover images.

I have heard that its not good to have images of text for links but I do. I was using javascript to do the rollovers before and it was faster at the rollover but then someone talked me into doing it with css and its slower on the rollover but now the links across the top of my page will not display to blind users. At lest not as far as I can tell.

Do you guys have any idea what I should do about the accessibility?

Do you guys have any idea how I can speed up the rollover process?

My site is http://www.drysnot.com

I have added links at the bottom of my page that allow navigation but its kinda just going around the problem. As for the rollover speed I don't know what to do maybe if I can preload the animated images.

Oh and one more thing with my level of html and css knowledge if you don't feel like you are talking to an idiot I may not be understanding what you are talking about lol

[Medyman]

Accessibility is a tough call. You have to logically and realistically weigh the attributes of your intended audience. If you have a website (which I realize this isn't) geared towards web designers/developers, than javascript and flash availability might not be of any great concern.

If you have viewers that are using things like screen readers, than obviously accessibility is a HUGE concern.

If you want to use the images as your main navigation, make sure the links at the bottom are more pronounced. If you offer another form of viable navigation, you shouldn't have much to worry about.

Regarding the rollOver...
You could use some javascript to preload the image. Or you could add a technique like this: http://www.findmotive.com/2006/10/31/simple-css-image-rollover/

[dog]

Hello,

I agree with what Medyman wrote, a preloader should solve your problem regarding the speed of the rollovers.

Regarding accessibility, you can include text for your links and then hide it using CSS, like this:


<div id="myMenu">
<a href="#" id="homeLink"><span>Home</span></a>
<a href="#" id="forumLink"><span>Forum</span></a>
<a href="#" id="shopLink"><span>Snot Shop</span></a>
</div>



#myMenu span {
display:none;
}


This way the text is there for screen-readers but doesn't get in the way of you using your images.

Hope this helps.

SNOT

dog