image mouseover->hover

Having googled myself silly, I now ask, if only to confirm my conclusions
Is it possible to emulate the <javascript>mouseover in css, to replace link
images with an alternate?

Having asked, I now return to google, in case I missed heaps.

Regards,
PhilM

PhilM <philm (AT) nospam (DOT) com.am>:

Is it possible to emulate the <javascript>mouseover in css,
to replace link images with an alternate?

a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

More elegant: <http://www.alistapart.com/articles/sprites/>.

--
"If you never fall, you dance in constant fear of falling."
Suzanne Farrell

Is it possible to emulate the <javascript>mouseover in css,
to replace link images with an alternate?

a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

no that way is not that hard, but, it still requires text. This only alters

the background, not the foreground, which I am trying to do

Regards,
PhilM

On Sat, 9 Oct 2004 21:22:18 +0930, PhilM <philm (AT) nospam (DOT) com.am> wrote:

Is it possible to emulate the <javascript>mouseover in css,
to replace link images with an alternate?

a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

no that way is not that hard, but, it still requires text. This only
alters
the background, not the foreground, which I am trying to do

If it's foreground, then it's content, and therefore not the role of CSS,
which is merely optional styling of content. HTML itself, of course,
cannot swap the images. The JS solution fails in non-Javascript
environments. And if the hover image tells the user what the link is, and
the normal image doesn't, well, that's mystery-meat design and not a good
choice beyond the technical considerations. We need something which is
either foolproof and will work or degrade well in all situations, or is
not foolproof but still cannot fail no matter what a browser does with it.

So, the only solution I see is to make sure the default image seen in
non-Javascript environments is effective alone, and users with Javascript
working will get the optional effect. (Perhaps, and I don't know enough
about it to say for certain, some server-side scripting might be able to
do this. I'd have no clue how to accomplish this, I'm simply acknowledging
that I cannot be definitive concerning this area.)

Incidentally, it very well may be that the design constraints under which
you're trying to solve this problem would make a viable solution
impossible. Be sure to consider that carefully.

"PhilM" <philm (AT) nospam (DOT) com.am> wrote:

Is it possible to emulate the <javascript>mouseover in css,
to replace link images with an alternate?

a:link {background-image: url(foo)}
a:hover {background-image: url(bar)}

That hard?

no that way is not that hard, but, it still requires text. This only alters
the background, not the foreground, which I am trying to do

span#decoimg:before{content:url(a.png)}
span#decoimg:hover:before{content:url(b.png)}

<span id="decoimg"></span>

Not supported by IE.

--
Spartanicus

Neal <neal413 (AT) yahoo (DOT) com> wrote:

If it's foreground, then it's content, and therefore not the role of CSS,

Except when the image is strictly decorative.

Decorative foreground images enable UAs to collapse the space they
occupy when image display is disabled.

--
Spartanicus

Neal wrote:

If it's foreground, then it's content, and therefore not the role of
CSS, which is merely optional styling of content. HTML itself, of

But of course you can control the size of the space and
put no "content" in it, in which case the background effectively
becomes the content. I'm not saying I recommend that ....

course, cannot swap the images. The JS solution fails in non-Javascript
environments. And if the hover image tells the user what the link is,

And the CSS solution fails in non-CSS environments.


--
Wes Groleau
Alive and Well
http://freepages.religions.rootsweb.com/~wgroleau/

Will look into using a bit of charm to make life easier

.... and change some minds on what they 'want' ...

Thanks again.