The Internet Classroom
CSS Hover Image Replacement
2006/07/07 22:15:39 PDT by MadnessX
[MadnessX's avatar]

Errr I need a way to replace an image with another when I use it as a link and then someone hovers over it with the cursor. I'm not sure I want to use Javascript tho.

There are 10 kinds of people in this world. People who know binary, and people who don't.

2006/07/07 22:17:35 PDT by aqhong

ZOMG THESE KIDS WILL BE THE DEATH OF ME YET XD

2006/07/07 22:30:11 PDT by Max Santana
[Max Santana's avatar]

*blink*

umm... riiiight, poor Alex.. XP

"Who? What does it matter? Or…do you need a name to describe me? A definition by words is merely a means to deceive oneself. It's meaningless before the truth. What matters is how you perceive things. The slightest shift, then life and death no longer have any meaning." ~ Virgil, Xenosaga

2006/07/07 22:37:29 PDT by kass
Edited at 2006/07/07 23:11:00 PDT
[kass's avatar]
Quote from MadnessX:

Errr I need a way to replace an image with another when I use it as a link and then someone hovers over it with the cursor. I'm not sure I want to use Javascript tho.

Naturally there is a way to do this with CSS hovers. Of course, it doesn't work in IE at all! So you can either wait until Javascript :P or else live with the fact that you won't see the effect in IE. Pick your poison. :P

[edit] I take it back. If you do it right, it DOES work in IE. And you already know enough CSS to make it work! :P

2006/07/08 15:26:05 PDT by MadnessX
Edited at 2006/07/08 15:26:36 PDT
[MadnessX's avatar]

asdf. >.>

r you talking about background-image replacement? cause I'm talking about foreground images

There are 10 kinds of people in this world. People who know binary, and people who don't.

2006/07/08 15:33:25 PDT by Forward Biased
[Forward Biased's avatar]
Quote from MadnessX:

asdf. >.>

r you talking about background-image replacement? cause I'm talking about foreground images

If you talking about <img>'s, then you'll have to use JavaScript. But if can, I highly recommend you use CSS background-image and switch it on :hover/:active.

2006/07/08 18:23:58 PDT by kass
[kass's avatar]

I'm talking about background-image replacement, yes. You may say you want foreground images, but for the effect that I think you want, it actually doesn't matter if it's a background image or if it's an image embedded by the img tag. Doing the background-image thing vs using javascript image rollovers gives you the same looking effect, so why not just do it the easier way, with CSS? >_>

2006/07/08 18:34:00 PDT by aqhong

Just for the record, if you had an entire page of thumbnails with a hover effect on each, it might be easier to switch out the images with Javascript than to declare the hover state of every single one in the CSS. If it's just one image you need the effect on, however, the CSS method would be simpler.

2006/07/08 18:46:35 PDT by kass
[kass's avatar]

Good point, Alex.

2006/07/08 22:16:22 PDT by MadnessX
[MadnessX's avatar]

I need 5. Is that too much for CSS? xP

There are 10 kinds of people in this world. People who know binary, and people who don't.

2006/07/08 22:29:58 PDT by Max Santana
[Max Santana's avatar]

The question is, "Are you willing to write that much code?" CSS can handle it regardless, but it depends on how much code you want to write.

((Five is a small number.))

"Who? What does it matter? Or…do you need a name to describe me? A definition by words is merely a means to deceive oneself. It's meaningless before the truth. What matters is how you perceive things. The slightest shift, then life and death no longer have any meaning." ~ Virgil, Xenosaga

2006/07/09 02:28:18 PDT by Raikia
[Raikia's avatar]
Quote from MadnessX:

Errr I need a way to replace an image with another when I use it as a link and then someone hovers over it with the cursor. I'm not sure I want to use Javascript tho.

Ah, Tansen. The successing computer genius of the family. =="

(¯`v´¯)
`*.¸.*´
¸.•´¸.•*¨) ¸.•*¨)
(¸.•´ (¸.•´ .•´ ¸¸.•¨¯`•. ~Raid kills on contact <3

2006/07/09 11:44:20 PDT by kass
[kass's avatar]

Agreeing with Max... five is a small enough number. I'm assuming you're talking about a navigation. The nice part is that you could put all this in an external stylesheet with all your regular styles and it will continue to work, with no extraneous code in the HTML itself.

So go with the CSS background image solution.

All TIC materials copyright © 2006 Cynthia Nie and Trevor Ridinger
Powered by Io Community Manager, Evlan, and FreeBSD