This seems like it should be an easy thing to do, but I'm having a ridiculously hard time doing it. When all is finished, I'd like to have 2 links/buttons. When you click button 1 it will put a rounded corner orange square behind it to show it's active. When you click button 2, it will turn off button 1's square and display the square behind button 2. I have four images I'm working with. 2 with just the text, and 2 with the text and the square behind it. Like I said it seems like it should be easy, however, so far everyone of the snippets I've tried will not swap an image when I click on it. I've got to be doing something obviously wrong.

Can someone help me?

Here is one of the code snippets I came across:
<SCRIPT LANGUAGE=JavaScript>
function swapImage() {
var image = document.getElementByID("swap")
image.src = "button2 image path"
}
</SCRIPT>

<IMG id="swap" src="button1 image path" onclick="swapImage();" border="0" />

Wow! That is a good start! The image now swaps once when I click it. Where would I start in getting it to behave the way I described?

Thanks.

I'd believe so. Sure, you could get by with only a single function, but if you're just beginnning javascript this is a good start. You might want to use a bit more modern tag for the script, though. Like this:

You might also want to take a look at CSS sprites, demonstated and discussed at ALA.

That might not be what you are looking for, but using a single file with both images has the advantage of at least appearing to load faster when the user makes the click. You would basically be moving the background position on both items instead of loading a new image into them, but as I said, this might be something that's not necessary at this point.

Damn... I meant the script tags that are missing the charset="utf-8" and a type="text/javascript" attributes. Naturally, it got clipped away from the comment. Also, I think the language attribute is deprecated.