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 00:51:56 UTC