October 12, 2000 - Turning Transparency On and Off | WebReference

October 12, 2000 - Turning Transparency On and Off

Yehuda Shiran October 12, 2000
Turning Transparency On and Off
Tips: October 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Internet Explorer 5.5 and up supports the 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 IFRAMEs 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 IFRAMEs. 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 IFRAMEs 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;
}