In Internet Explorer 4.0, Microsoft introduced a range of multimedia effects which could be added to standard HTML to spice up web pages. These were significantly enhanced in IE 5.5. This article introduces these new features, and explains how they can be incorporated into HTML commands compatible with Guide-ML. Examples and sample code are provided.

A gallery of special effects submitted by h2g2 researchers has also been established.

NB. The command syntax changed for IE 5.5, and this article covers the later version only. Pages viewed in versions prior to IE 5.5 or in other browsers may not be able to view the effects as described here.

Multimedia Effects

The range of multimedia effects provided in IE 5.5 includes visual filters, which change the way in which HTML objects such as text and graphics are displayed, and transitions, which change the way a new object is displayed. Transitions require scripting capability to invoke, and are therefore currently incompatible with Guide-ML. This article concentrates on visual filters only.

There are two categories of visual filter: static filters, which change the way an object is displayed, and procedural surfaces, which add an additional background surface below the object.

Featured Visual Filters

• Alpha
• BasicImage - Rotation
• BasicImage - Mirror, Invert, X-Ray & Grayscale
• BasicImage - Opacity
• BasicImage - Combinations
• Blur
• Chroma
• DropShadow
• Emboss
• Engrave
• Glow
• MotionBlur
• Pixelate
• Shadow
• Wave

• AlphaImageLoader
• Gradient

How to use them

IE5.5 includes a routine named Filter which executes each of the effects as a different program. Within each effect program, there are a number of different parameter settings to fine tune the effect.

The filter routine needs to be defined within a STYLE clause, which can be applied to a number of HTML layout commands used within Guide-ML. Examples have been illustrated using the <IMG> and <TABLE> commands.

General Syntax

Within the angled brackets of the HTML command element, add the STYLE clause as follows:

This should become clear in the examples given below.

Alpha

Type: Static Filter

Effect: Adjusts the clarity or opacity of an object. Having a low opacity value will fade the object into the background.

Style 0 - Uniform

Parameters
Style	0	0	0	0
Opacity	100	75	50	25
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=100);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=75);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=25);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Style 1 - Linear

Parameters
Style	1	1
Opacity	100	0
FinishOpacity	0	100
StartX	0	0
FinishX	50	100
StartY	0	100
FinishY	0	0
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=100,finishOpacity=0,startX=0,finishX=50,startY=0,finishY=0);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=0,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Styles 2 - Radial and 3 - Rectangular

Parameters
Style	2	2	3	3
Opacity	100	0	100	0
FinishOpacity	0	100	0	100
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=2,opacity=100,finishOpacity=0);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=2,opacity=0,finishOpacity=100);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=3,opacity=100,finishOpacity=0);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Alpha( style=3,opacity=0,finishOpacity=100);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

BasicImage

Type: Static Filter

Effect: Adjusts the color processing, image rotation, or opacity of the content of the object.

Rotation

Parameters
Rotation	0	1	2	3
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Rotation=0);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Rotation=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Rotation=2);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Rotation=3);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Mirror, Invert, X-Ray and Grayscale

Parameters
Mirror	1	-	-	-
Invert	-	1	-	-
XRay	-	-	1	-
Grayscale	-	-	-	1
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Invert=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Xray=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Grayscale=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Opacity

NB. this is identical to the Alpha filter opacity effect above, but the parameter values are different.

Parameters
Opacity	1	0.75	0.5	0.25
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Opacity=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Opacity=0.75);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Opacity=0.5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Opacity=0.25);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Some BasicImage Combinations

Parameters
Rotation	-	-	2	1
Mirror	1	-	1	-
Invert	-	1	-	-
XRay	1	-	-	-
Grayscale	-	-	-	1
Opacity	0.75	0.5	-	-
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, XRay=1, Opacity=0.75);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Invert=1, Opacity=0.5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Mirror=1, Rotation=2);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.BasicImage( Grayscale=1, Rotation=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Blur

Type: Static Filter

Effect: Blurs the content of the object so that it appears out of focus.

Parameters
PixelRadius	2	5	5	10
MakeShadow	false	false	true	true
ShadowOpacity	-	-	1	0.5
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur( PixelRadius=2,MakeShadow=false);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur( PixelRadius=5,MakeShadow=false);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur( PixelRadius=5,MakeShadow=true,ShadowOpacity=1);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur( PixelRadius=10,MakeShadow=true,ShadowOpacity=0.5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Chroma

Type: Static Filter

Effect: Displays a specific color of the content of the object as transparent. This is most useful on graphics with simple block colours

Parameters
Color		#000000	#000066
Code		<IMG style="FILTER: progid:DXImageTransform.Microsoft.Chroma( Color=#000000);" WIDTH="100px" HEIGHT="100px" SRC="/h2g2/skins/Classic/images/Smilies/f_rolleyes.gif"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Chroma( Color=#000066);" WIDTH="100px" HEIGHT="100px" SRC="/h2g2/skins/Classic/images/Smilies/f_rolleyes.gif"/>

Dropshadow

Type: Static Filter

Effect: Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion that the content is floating and casting a shadow.

Emboss

Type: Static Filter

Effect: Displays the content of the object as an embossed texture using grayscale values.

Parameters
(none)	-
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Emboss();" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Engrave

Type: Static Filter

Effect: Displays the content of the object as an engraved texture using grayscale values.

Parameters
(none)	-
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Engrave();" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Glow

Type: Static Filter

Effect: Adds radiance around the outside edges of the content of the object so that it appears to glow.

Parameters
Color	#ff00ff	#ff3300
Strength	5	20
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ff00ff,strength=5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ff3300,strength=20);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

MotionBlur

Type: Static Filter

Effect: Causes the content of the object to appear to be in motion.

Parameters
Direction	0	135
Strength	5	20
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.MotionBlur(direction=0,strength=5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.MotionBlur(direction=135,strength=20);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Pixelate

Type: Static Filter

Effect: Displays the content of the object as coloured squares that take the average colour value of the pixels they replace.

Parameters
MaxSquare	2	5	10	25
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=2);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=10);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=25);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Shadow

Type: Static Filter

Effect: Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion of a shadow.

Parameters
Direction	0	135
Color	#999999	#ff00ff
Strength	10	20
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=0,color=#999999,strength=10);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#ff00ff,strength=20);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

Wave

Type: Static Filter

Effect: Performs a sine wave distortion of the content of the object along the vertical axis.

Parameters
Frequency	1	1	8	1
LightStrength	50	10	50	10
Phase	10	90	90	10
Strength	5	5	5	15
Code	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=50,Phase=10,Strength=5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=10,Phase=90,Strength=5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=8,LightStrength=50,Phase=90,Strength=5);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>	<IMG style="FILTER: progid:DXImageTransform.Microsoft.Wave(freq=1,LightStrength=10,Phase=10,Strength=15);" WIDTH="100px" HEIGHT="100px" src="B1035830"/>

AlphaImageLoader

Type: Procedural Surface

Effect: Displays an image within the boundaries of the object and between the object background and content, with options to clip or resize the image.

Gradient

Type: Procedural Surface

Effect: Displays a colored surface between the object's background and content.