Visual InterDev

Transitions and Filters Sample

Microsoft^® Internet Explorer 4.0 comes with some new built-in functionality. This sample shows how to use Dynamic HTML (DHTML), transitions, and filters for interesting effects.

Behind the Scenes

This sample uses five files:

IE4.asp is the main file that sets up the frameset.
IE4.htm is a simple example of DHTML that is shown in the Header frame.
Main.htm fills the Main frame.
Filter.htm demonstrates the use of filters.
Trans.htm shows different transition effects.

IE4.asp sets up the frameset of this sample for easy navigation.

IE4.htm uses DHTML to create a visual effect when the mouse moves over a link. This is accomplished by setting up a few different styles for the <A>tag:

<style>
A.Item {
   cursor: hand;
   font-family: verdana; 
   font-size: 20;
   font-style: normal;
   background-color: white;
   color: black;
   text-decoration: none
 }
A.Highlight {
   cursor: hand; 
   font-family: verdana;
   font-size: 20;
   font-style: italic;
   background-color: black;
   color: white;
   text-decoration: none
 }
</style>

To switch between these styles, JavaScript is used to change the applied style when the mouse moves on and off the links:

<script LANGUAGE=JavaScript>
function rollon() {
  if (window.event.srcElement.className == "Item") {
     window.event.srcElement.className = "Highlight";
  }
}

Rollover.onmouseover = rollon;

function rolloff() {
  if (window.event.srcElement.className == "Highlight") {
     window.event.srcElement.className = "Item";
  }
}

Rollover.onmouseout = rolloff;
</script>

Filter.htm shows how different filters can be applied to objects in a Web page. In this example text, graphics, and objects are altered using filters.

A <DIV> tag is used to control what objects on the page are modified. Inside the <DIV> tag is some text, an image of a globe, and an object that draws a complex image:

<DIV ID=theImg style="WIDTH:90%" style="font-size:18pt;font-family:verdana;font-style:bold" >
Filters can affect any HTML element; including text, windowless controls, intrinsic controls, and images. <P>
<IMG id=glbimg hspace=10 vspace=10 width=150 height=150 src="../images/globe.gif">

<OBJECT ID=SG1
   STYLE="HEIGHT:150; WIDTH:150"
   CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
    <PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
    <PARAM NAME="Line0002" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0003" VALUE="Pie(-75,-75,150,150,0,10,0)">
    <PARAM NAME="Line0004" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0005" VALUE="Pie(-75,-75,150,150,0,10,18)">
    <PARAM NAME="Line0006" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0007" VALUE="Pie(-75,-75,150,150,0,10,36)">
    <PARAM NAME="Line0008" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0009" VALUE="Pie(-75,-75,150,150,0,10,54)">
    <PARAM NAME="Line0010" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0011" VALUE="Pie(-75,-75,150,150,0,10,72)">
    <PARAM NAME="Line0012" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0013" VALUE="Pie(-75,-75,150,150,0,10,90)">
    <PARAM NAME="Line0014" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0015" VALUE="Pie(-75,-75,150,150,0,10,108)">
    <PARAM NAME="Line0016" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0017" VALUE="Pie(-75,-75,150,150,0,10,126)">
    <PARAM NAME="Line0018" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0019" VALUE="Pie(-75,-75,150,150,0,10,144)">
    <PARAM NAME="Line0020" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0021" VALUE="Pie(-75,-75,150,150,0,10,162)">
    <PARAM NAME="Line0022" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0023" VALUE="Pie(-75,-75,150,150,0,10,180)">
    <PARAM NAME="Line0024" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0025" VALUE="Pie(-75,-75,150,150,0,10,198)">
    <PARAM NAME="Line0026" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0027" VALUE="Pie(-75,-75,150,150,0,10,216)">
    <PARAM NAME="Line0028" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0029" VALUE="Pie(-75,-75,150,150,0,10,234)">
    <PARAM NAME="Line0030" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0031" VALUE="Pie(-75,-75,150,150,0,10,252)">
    <PARAM NAME="Line0032" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0033" VALUE="Pie(-75,-75,150,150,0,10,270)">
    <PARAM NAME="Line0034" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0035" VALUE="Pie(-75,-75,150,150,0,10,288)">
    <PARAM NAME="Line0036" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0037" VALUE="Pie(-75,-75,150,150,0,10,306)">
    <PARAM NAME="Line0038" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0039" VALUE="Pie(-75,-75,150,150,0,10,324)">
    <PARAM NAME="Line0040" VALUE="SetFillColor(0,90,200)">
    <PARAM NAME="Line0041" VALUE="Pie(-75,-75,150,150,0,10,342)">
    <PARAM NAME="Line0042" VALUE="SetFillColor(255,255,255)">
    <PARAM NAME="Line0043" VALUE="Pie(-75,-75,150,150,0,10,360)">
</OBJECT>
</DIV>

The remainder of the page has buttons that allow you to apply different filters to the objects listed above. Here is an example from the button that will flip all the objects horizontally:

<input CLASS=clsbtn value="FlipH" type=button name=filt onclick="theImg.style.filter = 'fliph(enabled=1)'; progress.innerText = 'Flip Horizontal (fliph): Flips the visible pixels in the horizontal axis.';">

Trans.htm cycles through the different transition effects that you can use on objects. In this example, an image is displayed on top of some text and fades in and out with different transitions:

AB.filters.item(0).Transition = curtrans

AB refers to the <DIV> tag that defines what objects are going to be affected:

<DIV    ID="AB"
   STYLE="POSITION:ABSOLUTE; WIDTH:300; HEIGHT:360; Left:45%; Top:15%;background-color:black;
   FILTER:revealTrans(Duration=3.0, Transition=1)">

curtrans is a variable in the JavaScript code that cycles through the different transition effects:

curtrans = curtrans + 1
if curtrans > numtrans then
   curtrans = 0
end if