
There are unlimited uses for filters in both static and dynamic Web pages. The following scenarios explore some of the more common or interesting applications of filter styles and combinations of script and filters.
Static visual effects are the most common use of style filters. These include simply applying a filter to a DIV or object to create a nonchanging effect, such as a text drop shadow. Static effects are an easy way to enhance a Web page's design with minimum effort and bandwidth, and often without scripting.
The following example shows how television-style effects can be created using dynamic HTML positioning and the alpha visual filter.
<HTML> <HEAD><TITLE>Static Alpha Filter Demo</TITLE> </HEAD> <BODY> <DIV style="position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter: alpha(opacity=50)"></DIV> <DIV style="color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV> <IMG src="sam2.jpg"> </BODY> </HTML>
Visual effects can be "animated" using a timer script. The following sample shows two filters, alpha and glow, and two different timer methods.
<HTML>
<HEAD><TITLE>Timer Demos</TITLE>
<SCRIPT>
function init() {
makeFlash(bob)
setInterval("fred.filters.alpha.opacity = (fred.filters.alpha.opacity + 5) % 101", 100)
setInterval("foo(dave)", 100)
}
var delta = 5
function foo(obj) {
if ((obj.filters.alpha.opacity + delta > 100)
|| (obj.filters.alpha.opacity + delta < 0))
delta = - delta
obj.filters.alpha.opacity += delta
}
function makeFlash(obj) {
obj.flashTimer = setInterval("bob.filters.glow.enabled = !bob.filters.glow.enabled", 1000)
}
function stopFlash(obj) {
clearInterval(obj.flashTimer)
}
</SCRIPT>
</HEAD>
<BODY onload="init()">
<DIV id=bob style="width:50%; filter:glow(Color=#FAF900,Strength=2,enabled=0);" onclick="stopFlash(this)"><H1>Here is some text</H1></DIV>
<DIV id=fred style="width:50%; filter:alpha(opacity=100);"><H1>Here is some text</H1></DIV>
<DIV id=dave style="width:50%; filter:alpha(opacity=50); color: blue"><H1>Here is some text</H1></DIV>
</BODY>
</HTML>
Dynamic visual effects bring a basic level of interactivity to Web documents. Dynamic effects require an event to prompt a change in the documentthis can be a mouse rollover or click event, a timer interval, or a sequence of script functions calling the new content states.
Here an interactive step has been added to the previous "television caption" sample that displays the caption only when the mouse is over the inline image.
<HTML>
<HEAD><TITLE>Dynamic Alpha Filter Demo</TITLE>
<SCRIPT>
function caption() {
if (bob.style.visibility == "hidden") {
bob.style.visibility = ""
fred.style.visibility = ""
}
else {
bob.style.visibility = "hidden"
fred.style.visibility = "hidden"
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV id="bob" style="visibility:hidden; position:absolute; top:20; left:15; width:50%; height:35; background-color: black; filter: alpha(opacity=50)"></DIV>
<DIV id="fred" style="visibility:hidden; color:red; position:absolute; top:20; width:50%; height:100; margin-top:5; margin-left:5;"><P style="font-size:14pt; font-weight:bold; text-align:center">HERE IS CAPTION TEXT</P></DIV>
<IMG src="sam2.jpg" onmouseover="caption()" onmouseout="caption()">
</BODY>
</HTML>
Timers create cyclical effects, as in the following interactive demonstration.
Web authors often resort to the trick of using multiple graphics to indicate a user state for a single graphic, such as a navigation bar button. With visual filters, these are no longer requiredany graphic can be displayed in such a manner as to indicate whether it is available for user interaction or not. Best of all, it's all done in code, and doesn't require an additional download from a server.
This page shows how both the gray and alpha filters can visually represent unavailable link states.
As interactive objects, links can change state in response to mouse events, as this page demonstrates.
Combining visual filters, transitions, and sophisticated programming allows Web authors to create complex and compelling visual designs and interactivity. The following examples provide just a glimpse into the versatility of visual effects that are available in authoring for Internet Explorer 4.0.
The following Web page shows how the mask filter can be combined with a series of style changes to create an interesting effect.
The light filter is the most unique and complex visual filter. The following sample shows how the filter can be combined with mouse events to create a unique DHTML experience.
The same light filter can be controlled by sophisticated programming, as the following sample shows. Watch for additional examples of sophisticated Internet Explorer 4.0-enhanced Web site design on Microsoft Site Builder.
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.