• Tutorials
• IGNOU
• Online Books
• Home

Macaws

The blendTrans() filter fades an element out or in. It can be applied only through scripting. Three steps are required.

First, a duration value is established giving the number of seconds for the transition to take place. The general format is shown below.

object.style.filter="blendTrans(duration=seconds)"

Second, the filter's apply() method is run, followed by the setting of the element's visibility ("visible" when fading in and "hidden" when fading out).

object.filters.blendTrans.apply()
object.style.visibility="visible|hidden"

Finally, the filter's play() method is run to perform the blend.

object.filters.blendTrans.play()

The script sequence is

document.getElementById("id").style.filter="blendTrans(duration=n)";
document.getElementById("id").filters.blendTrans.apply();
document.getElementById("id").style.visibility="hidden|visible";
document.getElementById("id").filters.blendTrans.play();

All that is needed is the id of the element being blended and the duration and visibility of the blend.

Two overlaying elements can be blended. One element can be hidden while the second element is revealed. A click on the following "Blend" button fades one image while revealing an underlying image. A second click on the button reverses the blend.

The two images are positioned atop one another with position:absolute style settings inside a division that is positioned relative to maintain the pictures in the flow of page elements. Both images are given visibility settings to reveal the first image and hide the second one.

<div style="position:relative; width:300px; height:200px">
  <img id="Macaws" src="Macaws.jpg"
    style="position:absolute; visibility:visible"/>
  <img id="Lion" src="Lion.jpg"
    style="position:absolute; visibility:hidden"/>
</div>

The script that is called when the "Blend" button is clicked uses the images' visibility settings to determine the direction of the blend.

<script type="text/javascript">

function Blend()
{
  if (document.getElementById("Macaws").style.visibility == "visible") {
    document.getElementById("Macaws").style.filter="blendTrans(duration=3)";
    document.getElementById("Macaws").filters.blendTrans.apply();
    document.getElementById("Macaws").style.visibility="hidden";
    document.getElementById("Macaws").filters.blendTrans.play();
    document.getElementById("Lion").style.filter="blendTrans(duration=3)";
    document.getElementById("Lion").filters.blendTrans.apply();
    document.getElementById("Lion").style.visibility="visible";
    document.getElementById("Lion").filters.blendTrans.play();
  } else {
    document.getElementById("Lion").style.filter="blendTrans(duration=3)";
    document.getElementById("Lion").filters.blendTrans.apply();
    document.getElementById("Lion").style.visibility="hidden";
    document.getElementById("Lion").filters.blendTrans.play();
    document.getElementById("Macaws").style.filter="blendTrans(duration=3)";
    document.getElementById("Macaws").filters.blendTrans.apply();
    document.getElementById("Macaws").style.visibility="visible";
    document.getElementById("Macaws").filters.blendTrans.play();
  }
}

</script>

All blends take place for three seconds. While the visible image is being faded out, the invisible image is faded in. Both actions take place concurrently. The next time the button is clicked, the visibility settings have been reversed and blending takes place in the reverse direction.