image swap

[Sam]

I was wondering, is there any way (css only) to image swap an image thats not hovered on hover?
example:



_________________________
________ / \
/ \ | |
|img thats| | |
| hovered | | Image that changes |
\_________/ | |
| |
\_________________________/

[Vladdy]

Pure CSS solution is achievable in Gecko browsers when the image that changes is in a background of a block element that is a child of an image that is being hovered upon.
I think it can be made work in IE(5.5+) with either adding a behavior or making the image that is being hovered upon a background of an anchor element.
If that is acceptable, I can whip up some code.

[Sam]

but ie 5 would come up blank?

[Vladdy]

IE 5.0 has such a poor support for CSS that in needs a separate styling for even a remotely complicated layout. On the same token there are too few people who are still using it, to worry about providing them with the same presentation as you give the modern browsers.

[Sam]

ah, well, I'll see what I can come up with, and will prolly be asking again shortly.
Edit: would there be any way to provide a javascript alternative for ie 5 users?

[Vladdy]

Possibly, but for the same reason not worth the trouble.
See my sig.

[Sam]

good point.

[Ben Rogers]

well u could try doing a div:hover, but thats not ie supported so youd make a warped a like so

<style type="text/css" media="screen">
a.img-switch {
background: url(img-1.ext) top right;
width: 500px;
}
a.img-switch:hover {
background: url(img-2.ext) top right;
width: 500px;
}
</style>
<a href="#" class="img-switch"><img src="mouse-over_img.ext" width=" 150" alt="foo" /></a>

[Paul Jr]

Originally posted by omega
well u could try doing a div:hover, but thats not ie supported so youd make a warped a like so
That's just a normal image swap. He wants to be able to mouse over one image, and have another, across the other side of the page, change.

[Ben Rogers]

really stretch the div. css needs if then statements. it would jus kick ass.

[fredmv]

Originally posted by omega
css needs if then statements.No it does not and it never will. CSS is not a programming language and was never intended to be.

[Ben Rogers]

i mean stuff like
if (screen.width==800 && screen.height==600)
{
rules for 800/600 layout
}
if(img-switch:hover) {
blah {background {blah};
}

jus be cool is all.

[Paul Jr]

Originally posted by omega
i mean stuff like
if (screen.width==800 && screen.height==600)
{
rules for 800/600 layout
}
if(img-switch:hover) {
blah {background {blah};
}

jus be cool is all.
Yes, there is something like that. It's called JavaScript. ;)

[fredmv]

As aforementioned CSS does not need that. In your first example, you're apparently trying to check the resolution and apply different styles based on it. That's completely pointless when there is already a way to do this without checking for a specific resolution or otherwise: use relative units (e.g., em and percentages) so your layout works correctly regardless of resolution.

In your second example, you're basically checking to see if the element has been moused over. This also makes no sense whatsoever because it already works as is (i.e., foo:hover) thus rendering checking for that entirely pointless.

[Ben Rogers]

-- edited due to extreme stupidity --

[fredmv]

Originally posted by omega
whatever. itd just be convenient. and i mean check if sumtin is true to apply a style to a different object.Actually though if you think about it, there aren't many times when you'd need to do that. And moreover, if you actually had to, you could achieve it by other means with CSS.Originally posted by omega
drop it, its o/t. Whether it is or not is irrelevant; the original poster already got the help they were looking for and this further discussion could possibly answer questions asked in the future.

[Triumph]

Does this help?

http://www.meyerweb.com/eric/css/edge/popups/demo2.html