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: 12;
font-style: normal;
background-color:
black;
color: white;
text-decoration: none
}
A.Highlight {
cursor: hand;
font-family: verdana;
font-size: 12;
font-style:
italic;
background-color: white;
color: black;
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.
<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