Entry
How do I clip an iframe when I show a layer over it?
Aug 27th, 2000 06:24
Martin Honnen, jeff weideman,
Here is an example that works with IE4+ and has code for NN6 though
that doesn't work correctly with Mozilla M17:
<HTML>
<HEAD>
<SCRIPT>
function show () {
if (document.all) {
document.all.iframeDiv.style.clip = 'rect(50 auto auto 50)';
document.all.aLayer.style.visibility = 'visible';
}
else if (document.getElementById) {
document.getElementById('iframeDiv').style.clip =
'rect(50px auto auto 50px)';
document.getElementById('aLayer').style.visibility = 'visible';
}
}
function hide () {
if (document.all) {
document.all.iframeDiv.style.clip = 'rect(auto auto auto auto)';
document.all.aLayer.style.visibility = 'hidden';
}
else if (document.getElementById) {
document.getElementById('iframeDiv').style.clip =
'rect(auto auto auto auto)';
document.getElementById('aLayer').style.visibility = 'hidden';
}
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: void 0"
ONMOUSEOVER="show()"
ONMOUSEOUT="hide()">
move here
</A>
<DIV ID="iframeDiv"
STYLE="position: absolute;
left: 100px; top: 100px;"
>
<IFRAME NAME="anIframe"
SRC="http://JavaScript.FAQTs.com"
WIDTH="200" HEIGHT="200"
></IFRAME>
</DIV>
<DIV ID="aLayer"
STYLE="position: absolute;
visibility: hidden;
left: 100px; top: 100px;
width: 50px; height: 50px;
background-color: orange;"
>
JavaScript.FAQTs.com
</DIV>
</BODY>
</HTML>
