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

Mirabella,

as our site is almost wholly graphical, I like mcluhan maintain that 
the medium is the message. or more prosaically that the relationship of 
the images on the page is at least as information rich as the images 
themselves; for a text example consider the difference between a 
sentence, a drop down list and breadcrumbs.

So, all in all perhaps splitting hairs, or defining the separateness is 
not so important, rather judicious examples, such as the one you are 
seeking regarding CSS.

best wishes


Jonathan


On Wednesday, May 21, 2003, at 05:50 AM, Mirabella, Mathew J wrote:

>
> 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 02:23:33 UTC