Question

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 (links 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.

Answer 1

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; }