Content Supported by Sourcelens Consulting
<html>
<head>
</head>
<BODY bgColor=#ffffff leftMargin=40 link=#500000 vLink=#505050>
<FONT FACE="Verdana, Arial, Helvetica" SIZE=2>
<FONT SIZE=4 COLOR=#500000>Behind the Scenes</FONT>
<BR><BR>
<P>This sample uses five files: </P></FONT>
<UL>
<FONT FACE="Verdana, Arial, Helvetica" SIZE=2>
<LI>IE4.asp is the main file that sets up the frameset. </LI>
<LI>IE4.htm is a simple example of DHTML that is shown in the Header frame.
</LI>
<LI>Main.htm fills the Main frame. </LI>
<LI>Filter.htm demonstrates the use of filters. </LI>
<LI>Trans.htm shows different transition effects. </LI></FONT></UL>
<FONT FACE="Verdana, Arial, Helvetica" SIZE=2>
<P>IE4.asp sets up the frameset of this sample for easy
navigation.</P>
<P>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:</P>
<P>
<FONT face=Courier><style> <BR>
A.Item {<BR> cursor:
hand;<BR> font-family: verdana; <BR> font-size: 12;<BR>
font-style: normal;<BR> background-color:
black;<BR> color: white;<BR> text-decoration: none<BR>
}<BR>
A.Highlight {<BR> cursor: hand; <BR> font-family: verdana;<BR> font-size: 12;<BR> font-style:
italic;<BR> background-color: white;<BR> color: black;<BR> text-decoration: none<BR>
} <BR></style>
</FONT></P>
<P>To switch between these styles, JavaScript is used to
change the applied style when the mouse moves on and off the links:</P>
<FONT face=Courier><script LANGUAGE=JavaScript><BR>
function rollon() {<BR>
if
(window.event.srcElement.className == "Item") {<BR>
window.event.srcElement.className = "Highlight";<BR>
}<BR>
}<BR>
<BR>
Rollover.onmouseover = rollon;<BR>
<BR>
function rolloff() {<BR>
if
(window.event.srcElement.className == "Highlight") {<BR>
window.event.srcElement.className = "Item";<BR>
}<BR>
}<BR>
<BR>
Rollover.onmouseout = rolloff;<BR></script>
</FONT>
<P>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. </P>
<P>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:</P>
<FONT face=Courier><DIV ID=theImg style="WIDTH:90%"
style="font-size:18pt;font-family:verdana;font-style:bold" ><BR>
Filters can affect any HTML element; including text,
windowless controls, intrinsic controls, and images. <BR><IMG id=glbimg hspace=10 vspace=10 width=150 height=150
src="../images/globe.gif"><BR><OBJECT ID=SG1
STYLE="HEIGHT:150; WIDTH:150"<BR>
CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"><BR> <PARAM NAME="Line0001"
VALUE="SetFillStyle(1)"><BR>
<PARAM NAME="Line0002"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0003"
VALUE="Pie(-75,-75,150,150,0,10,0)"><BR> <PARAM NAME="Line0004"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0005"
VALUE="Pie(-75,-75,150,150,0,10,18)"><BR> <PARAM NAME="Line0006"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0007"
VALUE="Pie(-75,-75,150,150,0,10,36)"><BR> <PARAM NAME="Line0008"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0009"
VALUE="Pie(-75,-75,150,150,0,10,54)"><BR> <PARAM NAME="Line0010"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0011"
VALUE="Pie(-75,-75,150,150,0,10,72)"><BR> <PARAM NAME="Line0012"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0013"
VALUE="Pie(-75,-75,150,150,0,10,90)"><BR> <PARAM NAME="Line0014"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0015"
VALUE="Pie(-75,-75,150,150,0,10,108)"><BR> <PARAM NAME="Line0016"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0017"
VALUE="Pie(-75,-75,150,150,0,10,126)"><BR> <PARAM NAME="Line0018"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0019"
VALUE="Pie(-75,-75,150,150,0,10,144)"><BR> <PARAM NAME="Line0020"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0021"
VALUE="Pie(-75,-75,150,150,0,10,162)"><BR> <PARAM NAME="Line0022"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0023"
VALUE="Pie(-75,-75,150,150,0,10,180)"><BR> <PARAM NAME="Line0024"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0025"
VALUE="Pie(-75,-75,150,150,0,10,198)"><BR> <PARAM NAME="Line0026"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0027"
VALUE="Pie(-75,-75,150,150,0,10,216)"><BR> <PARAM NAME="Line0028"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0029"
VALUE="Pie(-75,-75,150,150,0,10,234)"><BR> <PARAM NAME="Line0030"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0031"
VALUE="Pie(-75,-75,150,150,0,10,252)"><BR> <PARAM NAME="Line0032"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0033"
VALUE="Pie(-75,-75,150,150,0,10,270)"><BR> <PARAM NAME="Line0034"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0035"
VALUE="Pie(-75,-75,150,150,0,10,288)"><BR> <PARAM NAME="Line0036"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0037"
VALUE="Pie(-75,-75,150,150,0,10,306)"><BR> <PARAM NAME="Line0038"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0039"
VALUE="Pie(-75,-75,150,150,0,10,324)"><BR> <PARAM NAME="Line0040"
VALUE="SetFillColor(0,90,200)"><BR>
<PARAM NAME="Line0041"
VALUE="Pie(-75,-75,150,150,0,10,342)"><BR> <PARAM NAME="Line0042"
VALUE="SetFillColor(255,255,255)"><BR> <PARAM NAME="Line0043"
VALUE="Pie(-75,-75,150,150,0,10,360)"><BR></OBJECT><BR></DIV><BR>
</FONT>
<P>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:</P>
<FONT face=Courier><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.';">
</FONT>
<P>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:
<FONT face=Courier>
AB.filters.item(0).Transition = curtrans
</FONT>
<P>AB refers to the <DIV> tag that defines what
objects are going to be affected:
<P>
<FONT face=Courier><DIV
ID="AB" STYLE="POSITION:ABSOLUTE; WIDTH:300; HEIGHT:360;
Left:45%; Top:15%;background-color:black; FILTER:revealTrans(Duration=3.0,
Transition=1)">
</FONT></P>
<P>curtrans is a variable in the JavaScript code that cycles
through the different transition effects: </P>
<P>
<FONT face=Courier>
curtrans =
curtrans + 1 <BR>
if curtrans > numtrans then curtrans = 0
end if
</P></FONT></FONT>
</BODY>
</html>