October 12, 2000 - Turning Transparency On and Off
October 12, 2000 Turning Transparency On and Off Tips: October 2000
Yehuda Shiran, Ph.D.
|
allowTransparency
method for objects of type FRAME
and IFRAME
. When an object is defined with the transparent
background color, it means that it renders with the background color of its container. It inherits the background color of its parent.Play around with the following frames. Turn transparency off and on with the appropriate buttons:
In this example, we have three levels of hierarchies. The top level hierarchy is the tip's document object. Its background color is set in the tip's
BODY
tag. The second level is the IFRAME
object. Its background color is defined in line. For example:
<IFRAME ... STYLE="background-color: yellow" ... >
The lowest level of hierarchy is the document being sourced in the IFRAME
element. For example:
<IFRAME ... SRC="001012a.html" ... >
The 001012a.html
document defines its background color in its BODY
tag:
<HTML>
<HEAD>
<TITLE>Transparent Document</TITLE>
</HEAD>
<BODY STYLE="background-color: transparent">
<H1>Transparent Document</H1>
<P>The host IFRAME has no background color.</P>
<P>The BODY tag is <BODY STYLE="background-color: transparent">.</P>
</BODY>
</HTML>
If the source document, 001012a.html
, is transparent, it inherits the background color from its container IFRAME
. If the IFRAME
container is transparent as well, the sourced document, 001012a.html
, inherits its background color from the next level up, which is the tip itself. Of course, if an object is not transparent, i.e. it has a background color of its own, this background color will override the background color of its container. When the background color is not defined, it is defaulted to transparent
.
The IFRAME
s above demonstrate this concept. The left-hand side IFRAME
sources the document 001012a.html
, while the right-hand side IFRAME
sources the document 001012b.html
. Both of these documents are defined as above as transparent
. That means, they inherit their background color from their containing IFRAME
s. The right-hand side IFRAME
has a yellow background color definition, and hence the right-hand side 001012b.html
document inherits this yellow color.
The left-hand side IFRAME
has no background color definition and hence is treated as transparent. Therefore, the left-hand side 001012a.html
document inherits the background tan color of the one-higher level, the tip.
Internet Explorer 5.5 and up lets you turn off the transparency capability. If an object has no background color definition, it will always render white, no matter which color is assigned to its container. Click the Transparency Off button above. Both document will turn white because they are both transparent (see code above) and transparency is not allowed.
The IFRAME
s above are defined as follows:
<IFRAME ID="frame1" SRC="001012a.html" allowTransparency="true" HEIGHT=250 WIDTH=300>
</IFRAME>
<IFRAME ID="frame2" SRC="001012b.html" allowTransparency="true"
STYLE="background-color: yellow" HEIGHT=250WIDTH=300>
</IFRAME>
The buttons above are defined as follows:
<INPUT TYPE="button" VALUE="Transparency Off" onclick="turnTransparencyOff()">
<INPUT TYPE="button" VALUE="Transparency On" onclick="turnTransparencyOn()">
The function turnTransparencyOff()
is defined as:
function turnTransparencyOff()
{
document.all.frame1.allowTransparency = false;
document.all.frame2.allowTransparency = false;
}
And the function turnTransparencyOn()
is defined as:
function turnTransparencyOn() {
document.all.frame1.allowTransparency = true;
document.all.frame2.allowTransparency = true;
}