Change images on mouseover

[Nuclear Krusader]

Howdy,

Anyone knows how can I make a picture appear in place of another when the mouse is passed over and revert to the original one when the mouse pointer is moved off the pic?

TIA

[Paintbait]

Pseudo-classes should do the trick.

Eg. :hover, :active

Here is a good tutorial on doing it in pure CSS, it works pretty well if you implement it right.

I hope that helps.

PS. Nice TES3 Reference

[Nuclear Krusader]

Thanks for replying. I'm gonna try that out and see how it works.

[Stryker]

Hiya Nuke,
Another way is to use a weee bit of JavaScript. It may be a little more reliable over different browsers. I've had a bit of trouble using Pseudo-classes in the past, but that's not to say they are bad. Here's another idea:

This goes in your (HEAD) section:

PHP Code:

<script language="JavaScript">
function changeImage(id,img)
{
    document.getElementById(id).src = img;
}
</script> 


And then you can reference it whever you want in your (BODY) section with different IDs and images:

PHP Code:

<img src="Image01.gif" id="Image01" onMouseOver="changeImage(this.id,'Image02.gif');" onMouseOut="changeImage(this.id,'Image01.gif');" />

<img src="Image03.gif" id="Image02" onMouseOver="changeImage(this.id,'Image04.gif');" onMouseOut="changeImage(this.id,'Image03.gif');" />

<img src="Image05.gif" id="Image03" onMouseOver="changeImage(this.id,'Image06.gif');" onMouseOut="changeImage(this.id,'Image05.gif');" /> 


If you need further explination, feel free to ask. Hope this helps too.
Stryker

[Paintbait]

I like that, pseudo classes have been my enemy of happiness in the past.

[Nuclear Krusader]

I tried the first method and it was working fine 'cept for the mouse pointer changing to the hand, and I couldn't figure out how to prevent that.

Then I came back to this thread and found Stryker's method. Worked like a charm!

Thanks a bunch, to both of you.

[Stryker]

No prob Nuke!
Just for reference, to change the mouse pointer to whatever you want using CSS.
http://www.w3schools.com/css/pr_class_cursor.asp

Glad it's working.
Stryker