Help with IFRAME Z-Index

Sorry about that.....

Odd issue relating to IFRAME Z-INDEX.

I have multiple images at the bottom of my screen. When any of the images are clicked, the source URL loads into an Iframe defined at the top of the page.
When you mouseover/mouseout of the images, a layer displays and hides depending on what image is selected.

Here is my issue.....

Initially, the layer is displaying as the top most elememnt, allowing the user to see what is defined in each layer.
When you click the button, you loose the z-index and the layer appears in between the iframe and bottom images. I have played around with z-index but can't get this behavior to change.

Below is the code for the iframe and a images. Does anyone have a suggestion?

<iframe name="mainid" id="mainid" allowtransparency="True" style="z-index:-1" src="./images/default2.gif" width="780" height="370" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">Sorry, your browser does not support iframes.</iframe>
 
<a href="./flash/profile1.swf" onMouseOver="showSec(1);" onMouseout="hideSec(1);" onClick="return loadiframe('mainid', this.href)"><img src="./images/1.jpg" title="Profile 1" alt="Profile 1" name="img1" width="75" height="108" border="0" id="img1" onClick="lightup(this, 50);"/></a><img src="./images/spacer.gif" alt="" width="3" height="5" border="0"/>

Iframe? Really? Whatever for? If you think you should use an iframe I think you need to get up to date with your design skills.