RE: image rollovers in css. what is content and what is presenta tion. background vs foreground.

Mirabella, Mathew J wrote:
> I have been thinking of ways to create the image rollover
> effect for links using css instead of java script.  That is,
> where an image link has the image changed on rolling over the
> link with the mouse pointer.  Can anyone suggest a better way than my
> initial ideas below? 
> 
> One idea is to use css like the following
> 	.image {background: url(2.gif);}
> 	a:hover.image {background: url(1.gif);}
> 	span.hidden {visibility: hidden;}
> to work with html such as;
> 	<p><a class="image" title="link title"
> href="url.com"><span class="hidden">Link Text</span></a>.</p>
> 
> This way the text of the link appears when css is not supported.
> 
> However, there are a few problems, not the least of which is
> the issue of the inaccessibility of hidden text for some screen
> readers. 
> 
> 
> Any other methods or suggestions?


Mat,

This might not give you the control you want, but Have you thought of using
a background-image that doesn't include 'rasterized graphical text' (such as
a tiled background gradiation) and then have the link in plain text, which
is then rendered on top of the image? This way the 'image' is presentation
and the 'content' remains in the plain text of the link.

It works like a charm, looks a lot nicer than a flat html color background,
works without CSS, and is accessible.

Geoff

Received on Wednesday, 21 May 2003 09:57:59 UTC