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

Having come across this issue, and reading about the
problems regarding hidden text, I had a thought:
how about using a transparent gif/png over the
background image, with the same size as the image you'd
normally have ? Maybe a convoluted kludge, but certainly
not more convoluted than the current hidden text monstrosity...

 	.image {background: url(2.gif);}
 	a:hover.image {background: url(1.gif);}


 	<p><a class="image" title="link title" 
 href="url.com"><img src="transparent.gif" alt="blah" width="250"
height="100" /></a>.</p>

Patrick
________________________________
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk

> -----Original Message-----
> From: Mirabella, Mathew J [mailto:Mathew.Mirabella@team.telstra.com]
> Sent: 21 May 2003 05:50
> To: w3c-wai-ig list
> Subject: image rollovers in css. what is content and what is
> presentation. background vs foreground.
> 
> 
> 
> All.
> 
> 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.
> 
> One issue is that this css uses images for backgrounds, 
> rather than using images as part of the link itself.  This 
> means that the link content (or link phrase) comes into 
> issue.  I have not found a way to specify the width and 
> heights of these images relative to the html element (such as 
> a, or p, or div).  various combinations of using display: 
> block; and width/height css properties does not seem to get 
> there.  This is a quite messy solution.
> 
> Any other methods or suggestions?
> 
> This leads me to a philosophical question of what is content 
> and what is presentation.  Most may agree that images on a 
> page are examples of "content", and the way they are laid out 
> etc is the "presentation".  In the case of JavaScript 
> rollover images, the images are part of the content in  a 
> way.  But it seems that css examples like mine above pushes 
> these images into the realm of "presentation".  This may be 
> ok for some cases, but what if the images contain information 
> that is important?  i.e. part of the content as is the case 
> with normal static images on a page?
> 
> If css is to be used, how can alternative text be provided 
> for such images?  Is the use of JavaScript therefore 
> ultimately a better way of doing this roll over effect than css?
> 
> Comments welcome.
> 
> Mat.
> 
> 
> 
> Mat.
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
>

Received on Wednesday, 21 May 2003 04:41:44 UTC