Note: Most of these Active X Controls are only compatible with IE
5.5 or above. They are used with cascading style sheets and the
CSS Filter object property.
Alpha Filter
<!--Creates different alpha filter effects on the image placed
between the DIV tags -->
<html>
<head>
<title>Alpha Filter</title>
<script type = "text/javascript">
<!--
function run()
{
pic.filters( "alpha" ).opacity = opacityButton.value;
pic.filters(
"alpha" ).finishopacity =
opacityButton2.value;
pic.filters(
"alpha" ).style = styleSelect.value;
}
// -->
</script>
</head>
<div id = "pic"
style = "position: absolute; left:0; top: 0;
filter: alpha( style = 2, opacity = 100,
finishopacity = 0 )">
<img src = "flag.gif" alt = "Flag" />
</div>
<table style = "position: absolute; top: 250; left: 0;
background-color: #CCFFCC" border = "1">
<tr>
<td>Opacity (0-100):</td>
<td><input type = "text" id = "opacityButton"
size = "3" maxlength = "3" value = "100" /></td>
</tr>
<tr>
<td>FinishOpacity (0-100):</td>
<td><input type = "text" id = "opacityButton2"
size = "3" maxlength = "3" value = "0" /></td>
</tr>
<tr>
<td>Style:</td>
<td><select id = "styleSelect">
<option value = "1">Linear</option>
<option value = "2" selected = "selected">
Circular</option>
<option value = "3">Rectangular</option>
</select></td>
</tr>
<tr>
<td align = "center" colspan = "2">
<input type = "button" value = "Apply"
onclick = "run()" />
</td>
</tr>
</table>
Blending Images
<!-- Blends two images, fading one into the other -->
<html>
<head>
<title>Blending
Images</title>
<script type = "text/javascript">
<!--
var whichImage = true;
function blend()
{
if ( whichImage ) {
image1.filters( "blendTrans" ).apply();
image1.style.visibility = "hidden";
image1.filters( "blendTrans" ).play();
}
else {
image2.filters( "blendTrans" ).apply();
image2.style.visibility = "hidden";
image2.filters( "blendTrans" ).play();
}
}
function reBlend ( fromImage )
{
if ( fromImage ) {
image1.style.zIndex -= 2;
image1.style.visibility = "visible";
}
else {
image1.style.zIndex += 2;
image2.style.visibility = "visible";
}
whichImage = !whichImage; //sets to false
blend();
}
// -->
</script>
</head>
<body style = "color: darkblue; background-color: lightblue"
onload = "blend()">
<h1>Blend Transition Demo</h1>
<img id = "image2" src = "cool12.jpg"
onfilterchange = "reBlend( false )"
style = "position: absolute; left: 50; top: 50;
width: 300; filter: blendTrans( duration = 4 );
z-index: 1" alt = "First Transition Image" />
<img id = "image1" src = "cool8.jpg"
onfilterchange = "reBlend( true )"
style = "position: absolute; left: 50; top: 50;
width: 300; filter: blendTrans( duration = 4 );
z-index: 2" alt = "Second Transition Image" />
Blurring Images
<html>
<head>
<title>Blur Filter</title>
<script type = "text/javascript">
<!--
var strengthIndex = 1;
var blurDirection = 0;
var upDown = 0;
var timer;
function reBlur()
{
blurImage.filters( "blur" ).direction =
document.forms( "myForm" ).Direction.value;
blurImage.filters( "blur" ).strength =
document.forms( "myForm" ).Strength.value;
blurImage.filters( "blur" ).add =
document.forms( "myForm" ).AddBox.checked;
}
function startDemo()
{
timer = window.setInterval( "runDemo()", 5 );
}
function runDemo( )
{
document.forms( "myForm" ).Strength.value =
strengthIndex;
document.forms( "myForm" ).Direction.value =
( blurDirection % 360 );
if ( strengthIndex == 35 || strengthIndex == 0 )
upDown = !upDown;
blurImage.filters( "blur" ).strength =
( upDown ? strengthIndex++ : strengthIndex-- );
if ( strengthIndex == 0 )
blurImage.filters( "blur" ).direction =
( ( blurDirection += 45 ) % 360 );
}
// -->
</script>
</head>
<body>
<form name = "myForm" action = "">
<table border = "1" style = "background-color: #CCFFCC">
<caption>Blur filter controls</caption>
<tr>
<td>Direction:</td>
<td><select name = "Direction">
<option value = "0">above</option>
<option value = "45">above-right</option>
<option value = "90">right</option>
<option value = "135">below-right</option>
<option value = "180">below</option>
<option value = "225">below-left</option>
<option value = "270">left</option>
<option value = "315">above-left</option>
</select></td>
</tr>
<tr>
<td>Strength:</td>
<td><input name = "Strength" size = "3" type = "text"
maxlength = "3" value = "0" /></td>
</tr>
<tr>
<td>Add original?</td>
<td><input type = "checkbox" name = "AddBox" /></td>
</tr>
<tr>
<td align = "center" colspan = "2">
<input type = "button" value = "Apply"
onclick = "reBlur();" /></td>
</tr>
<tr>
<td colspan = "2">
<input type = "button" value = "Start demo"
onclick = "startDemo();" />
<input type = "button" value = "Stop demo"
onclick = "window.clearInterval( timer );" /></td>
</tr>
<div id = "blurImage" style = "position: absolute;
top: 0; left: 300; padding: 0; filter: blur(
add = 0, direction = 0, strength = 0 );
background-color: white;">
<img align = "middle" src = "shapes.gif"
alt = "Shapes" />
</div>
Chroma Filter
<html>
<head>
<title>Chroma Filter</title>
<script type = "text/javascript">
<!--
function changecolor( theColor )
{
if ( theColor ) {
// if the user selected a color, parse the
// value to hex and set the filter color.
chromaImg.filters( "chroma" ).color = theColor;
chromaImg.filters( "chroma" ).enabled = true;
}
else // if the user selected "None",
// disable the filter.
chromaImg.filters( "chroma" ).enabled = false;
}
// -->
</script>
</head>
<body>
<h1>Chroma Filter:</h1>
<img id = "chromaImg" src = "trans.gif" style =
"position: absolute; filter: chroma" alt =
"Transparent Image" />
<form action = "">
<!-- The onchange event fires when -->
<!-- a selection is changed -->
<select onchange = "changecolor( this.value )">
<option value = "">None</option>
<option value = "#00FFFF">Cyan</option>
<option value = "#FFFF00">Yellow</option>
<option value = "#FF00FF">Magenta</option>
<option value = "#000000" selected = "selected">
Black</option>
</select>
</form>
Light Cones
<html>
<head><title>Cone lighting</title>
<script type = "text/javascript">
var upDown = true;
var counter = 0;
var moveRate = -2;
function setLight()
{
marquee.filters( "light" ).addCone( 0, marquee.height,
8, marquee.width / 2, 30, 255, 150, 255, 50, 15 );
marquee.filters( "light" ).addCone( marquee.width,
marquee.height, 8, 200, 30, 150, 255, 255, 50, 15 );
marquee.filters( "light" ).addCone( marquee.width / 2,
marquee.height, 4, 200, 100, 255, 255, 150, 50, 50 );
window.setInterval( "display()", 100 );
}
function display()
{
counter++;
if ( ( counter % 30 ) == 0 )
upDown = !upDown;
if ( ( counter % 10 ) == 0 )
moveRate *= -1;
if ( upDown ) {
marquee.filters( "light" ).moveLight(
0, -1, -1, 3, 0 );
marquee.filters( "light" ).moveLight(
1, 1, -1, 3, 0 );
marquee.filters( "light" ).moveLight(
2, moveRate, 0, 3, 0);
}
else {
marquee.filters( "light" ).moveLight(
0, 1, 1, 3, 0 );
marquee.filters( "light" ).moveLight(
1, -1, 1, 3, 0 );
marquee.filters( "light" ).moveLight(
2, moveRate, 0, 3, 0);
}
}
</script>
</head>
<body style = "background-color: #000000"
onload = "setLight()">
<img id = "marquee" src = "marquee.gif"
style = "filter: light; position: absolute; left: 25;
top: 25" alt = "Marquee" />
Drop Shadows
<html>
<head>
<title>DHTML dropShadow and light
Filters</title>
<script type = "text/javascript">
<!--
function setlight( )
{
dsImg.filters( "light" ).addPoint( 150, 150,
125, 255, 255, 255, 100 );
}
function run()
{
eX = event.offsetX;
eY = event.offsetY;
xCoordinate = Math.round(
eX-event.srcElement.width / 2, 0 );
yCoordinate = Math.round(
eY-event.srcElement.height / 2, 0 );
dsImg.filters( "dropShadow" ).offx =
xCoordinate / -3;
dsImg.filters( "dropShadow" ).offy =
yCoordinate / -3;
dsImg.filters( "light" ).moveLight(
0, eX, eY, 125, 1 );
}
// -->
</script>
</head>
<body onload = "setlight()" style = "background-color: green">
<img id = "dsImg" src = "circle.gif"
style = "top: 100; left: 100; filter: dropShadow(
offx = 0, offy = 0, color = black ) light()"
onmousemove = "run()" alt = "Circle Image" />
Shadowing
<html>
<head>
<title>Shadow Filter</title>
<script type = "text/javascript">
<!--
var shadowDirection = 0;
function start()
{
window.setInterval( "runDemo()", 500 );
}
function runDemo()
{
shadowText.innerText =
"Shadow Direction: " + shadowDirection % 360;
shadowText.filters( "shadow" ).direction =
( shadowDirection % 360 );
shadowDirection += 45;
}
// -->
</script>
</head>
<body onload = "start()">
<h1 id = "shadowText" style = "position: absolute; top: 25;
left: 25; padding: 10; filter: shadow( direction = 0,
color = red )">Shadow Direction: 0</h1>
</body>
</html>
Flipping Images
<html>
<head>
<title>The flip filter</title>
<style type = "text/css">
body { background-color: #CCFFCC }
table { font-size: 3em;
font-family: Arial, sans-serif;
background-color: #FFCCCC;
border-style: ridge ;
border-collapse: collapse }
td { border-style: groove;
padding: 1ex }
</style>
</head>
<tr>
<!-- Filters are applied in style declarations -->
<td style = "filter: fliph">Text</td>
<td>Text</td>
</tr>
<tr>
<!-- More than one filter can be applied at once -->
<td style = "filter: flipv fliph">Text</td>
<td style = "filter: flipv">Text</td>
</tr>
Glowing Text
<html>
<head>
<title>Glow Filter</title>
<script type = "text/javascript">
<!--
var strengthIndex = 1;
var counter = 1;
var upDown = true;
var colorArray = [
"FF0000", "FFFF00", "00FF00",
"00FFFF", "0000FF", "FF00FF" ];
function apply()
{
glowSpan.filters( "glow" ).color =
parseInt( glowColor.value, 16 );
glowSpan.filters( "glow" ).strength =
glowStrength.value;
}
function startdemo()
{
window.setInterval( "rundemo()", 150 );
}
function rundemo()
{
if ( upDown ) {
glowSpan.filters( "glow" ).strength =
strengthIndex++;
}
else {
glowSpan.filters( "glow" ).strength =
strengthIndex--;
}
if ( strengthIndex == 1 ) {
upDown = !upDown;
counter++;
glowSpan.filters( "glow" ).color =
parseInt( colorArray[ counter % 6 ], 16 );
}
if ( strengthIndex == 10 ) {
upDown = !upDown;
}
}
// -->
</script>
</head>
<body style = "background-color: #00AAAA">
<h1>Glow Filter:</h1>
<span id = "glowSpan" style = "position: absolute;
left: 200;top: 100; padding: 5; filter: glow(
color = red, strength = 5 ); font-size: 2em">
Glowing Text
</span>
<table border = "1" style = "background-color: #CCFFCC">
<tr>
<td>Color (Hex)</td>
<td><input id = "glowColor" type = "text" size = "6"
maxlength = "6" value = "FF0000" /></td>
</tr>
<tr>
<td>Strength (1-255)</td>
<td><input id = "glowStrength" type = "text"
size = "3" maxlength = "3" value = "5" />
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "button" value = "Apply"
onclick = "apply()" />
<input type = "button" value = "Run Demo"
onclick = "startdemo()" /></td>
</tr>
</table>
Mask Filter
<html>
<head>
<title>Mask Filter</title>
</head>
<!-- Filter parameters are specified in parentheses, -->
<!-- in the form param1 = value1, param2 = value2, -->
<!-- etc. -->
<div style = "position: absolute; top: 125; left: 20;
filter: mask( color = #CCFFFF )">
<h1 style = "font-family: Courier, monospace">
AaBbCcDdEeFfGgHhIiJj<br />
KkLlMmNnOoPpQqRrSsTt
</h1>
</div>
<img src = "gradient.gif" width = "400" height = "200"
alt = "Image with Gradient Effect" />
</body>
</html>
Image Filters
<html>
<head>
<title>Misc. Image
filters</title>
<style type = "text/css">
.cap { font-weight: bold;
background-color: #DDDDAA;
text-align: center }
</style>
</head>
<body>
<table class = "cap">
<tr>
<td>Normal</td>
<td>Grayscale</td>
</tr>
<tr>
<td><img src = "hc.jpg" alt =
"normal scenic view" /></td>
<td><img src = "hc.jpg" style = "filter: gray"
alt = "gray scenic view"/>
</td>
</tr>
<tr>
<td>Xray</td>
<td>Invert</td>
</tr>
<tr>
<td><img src = "hc.jpg" style = "filter: xray"
alt = "xray scenic view"/>
</td>
<td><img src = "hc.jpg" style = "filter: invert"
alt = "inverted scenic view"/>
</td>
</tr>
</table>
Transitions
(Various)
<html>
<head>
<title>24 DHTML
Transitions</title>
<script type = "text/javascript">
<!--
var transitionName =
["Box In", "Box Out",
"Circle In", "Circle Out",
"Wipe Up", "Wipe Down", "Wipe Right", "Wipe Left",
"Vertical Blinds", "Horizontal Blinds",
"Checkerboard Across", "Checkerboard Down",
"Random Dissolve",
"Split Vertical In", "Split Vertical Out",
"Split Horizontal In", "Split Horizontal Out",
"Strips Left Down", "Strips Left Up",
"Strips Right Down", "Strips Right Up",
"Random Bars Horizontal", "Random Bars Vertical",
"Random"];
var counter = 0;
var whichImage = true;
function blend()
{
if ( whichImage ) {
image1.filters( "revealTrans" ).apply();
image1.style.visibility = "hidden";
image1.filters( "revealTrans" ).play();
}
else {
image2.filters( "revealTrans" ).apply();
image2.style.visibility = "hidden";
image2.filters( "revealTrans" ).play();
}
}
function reBlend( fromImage )
{
counter++;
if ( fromImage ) {
image1.style.zIndex -= 2;
image1.style.visibility = "visible";
image2.filters("revealTrans").transition =
counter % 24;
}
else {
image1.style.zIndex += 2;
image2.style.visibility = "visible";
image1.filters("revealTrans").transition =
counter % 24;
}
whichImage = !whichImage;
blend();
transitionDisplay.innerHTML = "Transition " +
counter % 24 + ": " + transitionName[ counter % 24 ];
}
// -->
</script>
</head>
<body style = "color: white; background-color: lightcoral"
onload = "blend()">
<img id = "image2" src = "icontext.gif"
style = "position: absolute; left: 10; top: 10;
width: 300; z-index:1; visibility: visible;
filter: revealTrans( duration = 2, transition = 0 )"
onfilterchange = "reBlend( false )" alt =
"Programming Tips" />
<img id = "image1" src = "icons2.gif"
style = "position: absolute; left: 10; top: 10;
width: 300; z-index:1; visibility: visible;
filter: revealTrans( duration = 2, transition = 0 )"
onfilterchange = "reBlend( true )" alt = "Icons" />
<div id = "transitionDisplay" style = "position: absolute;
top: 70; left: 80">Transition 0: Box In</div>
Wavy Text (CPU Intensive)
<html>
<head>
<title>Wave Filter</title>
<script type = "text/javascript">
<!--
var wavePhase = 0;
function start()
{
window.setInterval( "wave()", 5 );
}
function wave()
{
wavePhase++;
flag.filters( "wave" ).phase = wavePhase;
}
// -->
</script>
</head>
<body onload = "start();">
<span id = "flag"
style = "align: center; position: absolute;
left: 30; padding: 15;
filter: wave(add = 0, freq = 1, phase = 0,
strength = 10); font-size: 2em">
Here is some waaaavy text
</span>
Contact
