Link element with text, background, display behaviour

So, this one has me a little perplexed. I'm probably just looking at it from the wrong angle, I'm not sure. Anyhow, here goes:

I have a navigation section on a site, and I want each button (link开发者_Go百科s to define contents of an iframe below) to have one background image when 'normal', one when the cursor is hovered over, and one while its corresponding content is displayed in the iframe. I'm guessing that last one might require some Javascript, but I really don't know (all this is still relatively new to me). I'm hoping at least some of it can be done in the usual a:link, a:hover, etc. way.

Any guidance would be greatly appreciated.

Add a class to it when it's clicked and has the iframe's content changed like this (javascript):

function changeIFrame(link) {
    document.getElementsByTagName('iframe')[0].src = link.href;
    link.className = 'activeFrame';
}

html:

<a href="nameOfUrl.html" onclick="changeIFrame(this); return false;">link text</a>

css:

.activeFrame { background-color: blue; }

Create a new CSS class called "current" and apply that class to link that has its corresponding content shown. All others don't get "current" applied to it.