Help! Anybody fluent in HTML?

Tools    





In the Beginning...
I'm in the process of building a website and trying to do something pretty specific on my menu links.

Each link in my main horizontal menu will be an image. I want to mimic a hover effect so that when the visitor hovers over each image, the image becomes replaced by another.

So, this is my first menu image that will be linked:



When visitors hover over, I want them to see this:



As an added difficulty, I'm planning for the hover symbols on each image to be different.

I'm trying to make this work using styles, and I know I'll need a separate style for each image so the symbols themselves can be different, but I can't figure out what the code should be. It seems like transposing one image for another on hover should be so easy, but I've scoured the Net trying to find an adopt existing examples of code and nothing is working. Serious +rep is up for grabs here.

Help!



Not a problem. Technically you'll be using JavaScript rather than HTML, and there are lots of cleaner, more efficient ways to do this, but this is probably the simplest and easiest to edit for your purposes:
<img src="hover_off.gif" onmouseover="this.src='hover_on.gif';" onmouseout="this.src='hover_off.gif';" />
There are better ways to go about this if you're going to do more than one, though. PM me if it matters. If you're just trying to throw something together that works, though, this'll do fine.

There's also a pure CSS way to do this, provided you style some other element to use the images as backgrounds, rather than ordinary images.



In the Beginning...
THANK. YOU.

Ugh. Why didn't I just ask two hours ago? Thanks so much, really. I'm using separate image files for each item in the menu, so this even keeps me from having to use specific styles.

Whew. If you don't mind, I might hit you up again if I have any more issues. I'm very much a novice at HTML and haven't done it in a while anyway, so I'm kinda learning and re-learning things at the same time right now.



No worries. The amusing thing is, I built a site years ago (I've since sold it to a friend) that spontaneously generates custom code, and one of the tools was as a JavaScript Image Mouseover generator (looks like there's a form post problem with it at the moment, though, so it's not working right now).

Anyway, yeah, feel free to ask away, PM or in this thread. I'm cool with it either way and always enjoy helping out. A whole lot of people took the time to help me out when I was starting, one even specifically telling me, when I asked how I could repay them, that I should just do the same thing for someone else someday. So I'm always glad to get a chance to.



Great advice Chris - I use flash for most of my hovers - but I understand those that dislike it. Nothing like good ol html though
__________________
“The gladdest moment in human life, methinks, is a departure into unknown lands.” – Sir Richard Burton