iframe Menu Hangup

[JSergeant81]

Hello there guys/gals!

I'm working on my first html project in a while and have gotten hung up on a bit of code I was hoping some of you smart folks could shine some light on the error of my ways!

What I am trying to achieve is have my Menu across the top of the screen in a table. When you mouse over the text it highlights the text and changes the iframe to that menu item's html file.

I've gotten the highlight and clear to work, but with my code, it only changes the location.href to the first one you mouse over. After that, it no longer changes the iframe location on any of the other menus.

Any pointers?

I haven't programmed html since the netscape navigator days so be gentle!

Here's what I've gotten so far...

<table style="width: 95%" align="center">
    <tr>
        <td class="auto-style5" onmouseout="this.style.backgroundColor='transparent'" onmouseover="this.style.backgroundColor='#99CCFF', document.getElementById('iframe1').contentWindow.document.location.href='Home.html';">
        Home</td>
        <td class="auto-style5" onmouseout="this.style.backgroundColor='transparent'" onmouseover="this.style.backgroundColor='#99CCFF', document.getElementById('iframe1').contentWindow.document.location.href='About.html';">
        About Us</td>
        <td class="auto-style5" onmouseout="this.style.backgroundColor='transparent'" onmouseover="this.style.backgroundColor='#99CCFF', document.getElementById('iframe1').contentWindow.document.location.href='ContactUs.html';">
        Contact Us</td>
    </tr>
</table>