- From: Stuart Ballard <sballard@netreach.com>
- Date: Thu, 20 Jun 2002 09:48:30 -0400
- 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.
Thoughts?
Stuart.
--
Stuart Ballard, Programmer
NetReach - Internet Solutions
(215) 283-2300, ext. 126
http://www.netreach.com/
Received on Thursday, 20 June 2002 09:48:46 UTC