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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow

 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;
}

People who read this tip also read these tips:

Look for similar tips by subject:


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters > 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark