Please help: iFrame / HTML

Hey... I'm new, but I'm hoping someone can help me out. You'd save me from doing a huge redesign.

Here's my problem:

Navigation rollovers display an image to the left in an iFrame, when the navigation button is clicked for a certain page, that page loads in the same spot to the left in the same iFrame. The problem is when you move your mouse off the navigation after you've clicked for a page to load... once you move off the nav bar and if you happen to rollover anything else on the nav bar, the page that was loaded goes away and you go back to having the rollover images swapping. Hopefully this makes sense?
Here's the link: www.mymodasalon.com

Thanks for taking the time to read about my stupidity. :)

Well ideally what would you like to happen then?

To fix this you'd just need to implement some logic in Javascript, but we need to know what behavior you're after before we can help.

I'd like for everything to work as-is, but without the minor problem of losing my page when you roll off the nav.

I want the rollovers to display at left in the iFrame (as-is).
I want the pages to load on click at left in the iFrame (as-is).
I want the user to be able to move their mouse to the loaded page at right after they have clicked the page and for the page to still stay loaded and not have the rollover images come back.

Does this make sense? I hope this is clear. Thanks for your reply! :)

This may be a javascript issue because as long as there is an onmouseover event for those buttons, the script is going to do what it is supposed to do. There might be a php answer for this too, but that is not one of my strengths.

How imperative is the iframe when the user actually clicks the link? Otherwise, you might be able to have a new page reload that loads and the onmouseover event is not present for the "selected" page in the iframe...but that would take away from some of the "sleekness" you have got there...:confused:

So you only want the rollovers to happen if there is no content in the iFrame then? Then you'll need to modify the javascript similar to this:

var loaded = false

function changeImage(id) {
if (!loaded) {
// do the image swap stuff
}
}


And when you actually load a page you need to set that loaded flag to true so the rollovers don't happen.