W3C home > Mailing lists > Public > www-style@w3.org > June 2002

Re: Rollover-image Property

From: Stuart Ballard <sballard@netreach.com>
Date: Thu, 20 Jun 2002 09:48:30 -0400
Message-ID: <3D11DD2E.8000305@netreach.com>
To: Manos Batsis <m.batsis@bsnet.gr>
CC: Nicholas Atkinson <nik@casawana.com>, www-style@w3.org

Manos Batsis wrote:
> Your post is contradictive. As you say, one can achieve this very common
> effect consistently across browsers today using just CSS:
> a:link{
>  background-image: url('myImage.png');
> }
> a:hover{
>  background-image: url('myHoverImage.png');
> }
> Why introduce a new property? This will probably result in much more
> incompatibilities between browsers.

One thing you can't easily do right now is size an element to the 
natural size of its background image. Also, some browsers simply don't 
support background images, so for compatibility you really need to be 
using an <img> in there somewhere - which will then get displayed *in 
front* of whatever background image you carefully selected in your CSS.

However, instead of creating a property specifically for "rollover 
images", I think it would be preferable to solve the general problems. I 
suggest either:
(1) Allowing the "content" property to take a url() of an image as an 
argument, and also allowing it to apply to any element, instead of just 
the before and after pseudos. Anything in the "content" property would 
completely replace the regular content of the element; OR
(2) Providing a "replaced-image" property which has an effect only on 
empty elements. "img" could be declared in the UA css as "img { 
replaced-image: url(attr(src)) }" or something. Then you could use 
"a.mylink:hover > img { replaced-image: url("images/mylink-hover.png")}" 
to get a rollover effect.



Stuart Ballard, Programmer
NetReach - Internet Solutions
(215) 283-2300, ext. 126
Received on Thursday, 20 June 2002 09:48:46 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:02 UTC