Ok, if you want to go the CSS route, here's what you can do.
Create an image of each rollover with the regular state and rollover state side by side. Make sure they are the same size. So if the image you're using to link is 100x25 pixels, make the total image 200x25, with the two states next to each other. Then make a rule to attach to a spacer image on the screen, like this:
a.link1 { background:url(bg_image.ext) ; height:25px ; width:100px }
a.link1:hover { background:url(bg_image.ext) right }
Just for kicks, toss this into your style sheet:
a img { border:none }
That will keep all linked images from showing te default 1px blue border.
Then in your HTML code, you'll have a link like this:
<a href="somewhere.html" class="link1"><img src="spacer.gif" alt="appropriate alternative text"></a>
Then just repeat the process for all links involved. This is the foolproof way to make the rollover effect work without worrying about unreliability inherent in JavaScript.
If you do wish to go with JavaScript, the coding is a little less clean, and there are more than one way to do it. Here's one:
<a href="somewhere.html"><img src="linkimage1.ext" onmouseover="this.src=linkimage2.ext" onmouseout="this.src=linkimage1.ext" border="0"></a>
Again, the CSS version is much more reliable, and it's a little more efficient when you move the rollover function into its own master document, but I suppose going the JavaScript route won't hurt too bad. Does that help at all, or is it more confusing now?
