Dynamic HTML

© 2004 Prentice Hall, Inc. All rights reserved.
Chapter 15 - Dynamic HTML:
Filters and Transitions
Outline
15.1 Introduction
15.2 Flip Filters: flipv and fliph
15.3 Transparency with the chroma Filter
15.4 Creating Image masks
15.5 Miscellaneous Image Filters: invert, gray and xray
15.6 Adding shadows to Text
15.7 Creating Gradients with alpha
15.8 Making Text glow
15.9 Creating Motion with blur
15.10 Using the wave Filter
15.11 Advanced Filters: dropShadow and light
15.12 blendTrans Transition
15.13 revealTrans Transition

Objectives
• In this lesson, you will learn:
– To use filters to achieve special effects.
– To combine filters to achieve an even greater variety of
special effects.
– To be able to create animated visual transitions between
Web pages.
– To be able to modify filters dynamically, using DHTML.

15.1 Introduction
• Filters
– Cause changes that are persistent
• Transitions
– Temporary
– Allow transfer from one page to another with pleasant visual
effect
• For example, random dissolve

15.2 Flip Filters: flipv and fliph
• flipv and fliph filters mirror text or images
vertically and horizontally, respectively

© 2004 Prentice Hall, Inc.
All rights reserved.
OutlineOutline
flip.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 
6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>The flip filter</title>
11
12 <style type = "text/css">
13 body { background-color: #CCFFCC }
14
15 table { font-size: 3em;
16 font-family: Arial, sans-serif;
17 background-color: #FFCCCC;
18 border-style: ridge ;
19 border-collapse: collapse }
20
21 td { border-style: groove;
22 padding: 1ex }
23 </style>
24 </head>
25

OutlineOutline
flip.html
(2 of 2)
26 <body>
27
28 <table>
29
30 <tr>
31 
32 <td style = "filter: fliph">Text</td>
33 <td>Text</td>
34 </tr>
35
36 <tr>
37 
38 <td style = "filter: flipv fliph">Text</td>
39 <td style = "filter: flipv">Text</td>
40 </tr>
41
42 </table>
43
44 </body>
45 </html>

No filters applied
flipv filter applied
fliph filter applied
Bothfliph and flipv
filters applied

15.3 Transparency with the chroma Filter
• chroma filter applies transparency effects
dynamically
– Without using a graphics editor to hard-code transparency
into the image
• onchange
– Fires when the value of a form changes

OutlineOutline
chroma.html
(1 of 3)
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 
6 
7
9 <head>
10 <title>Chroma Filter</title>
11
12 <script type = "text/javascript">
13 <!--
14 function changecolor( theColor )
15 {
16 if ( theColor ) {
17 // if the user selected a color, parse the
18 // value to hex and set the filter color.
19 chromaImg.filters( "chroma" ).color = theColor;
20 chromaImg.filters( "chroma" ).enabled = true;
21 }
22 else // if the user selected "None",
23 // disable the filter.
24 chromaImg.filters( "chroma" ).enabled = false;
25 }

OutlineOutline
chroma.html
(2 of 3)
26 // -->
27 </script>
28 </head>
29
30 <body>
31
32 <h1>Chroma Filter:</h1>
33
34 <img id = "chromaImg" src = "trans.gif" style =
35 "position: absolute; filter: chroma" alt =
36 "Transparent Image" />
37
38 <form action = "">
39 
40 
41 <select onchange = "changecolor( this.value )">
42 <option value = "">None</option>
43 <option value = "#00FFFF">Cyan</option>
44 <option value = "#FFFF00">Yellow</option>
45 <option value = "#FF00FF">Magenta</option>
46 <option value = "#000000" selected = "selected">
47 Black</option>
48 </select>
49 </form>
50

OutlineOutline
chroma.html
(3 of 3)
51 </body>
52 </html>

15.4 Creating Image masks
• Background is a solid color
• Foreground is transparent to the image or color
behind it

OutlineOutline
mask.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Mask Filter</title>
11 </head>
12
13 <body>
14
15 <h1>Mask Filter</h1>
16
17 
18 
19 
20 <div style = "position: absolute; top: 125; left: 20;
21 filter: mask( color = #CCFFFF )">
22 <h1 style = "font-family: Courier, monospace">
23 AaBbCcDdEeFfGgHhIiJj<br />
24 KkLlMmNnOoPpQqRrSsTt
25 </h1>

OutlineOutline
mask.html
(2 of 2)
26 </div>
27
28 <img src = "gradient.gif" width = "400" height = "200"
29 alt = "Image with Gradient Effect" />
30 </body>
31 </html>

15.5 Miscellaneous Image Filters: invert,
gray and xray
• invert filter
– Negative image effect
• Dark areas become light and light areas become dark
• gray filter
– Grayscale image effect
• All color is stripped from the image, only brightness data
remains
• xray filter
– X-ray effect
• Inversion of the grayscale effect

OutlineOutline
misc.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Misc. Image filters</title>
11
12 <style type = "text/css">
13 .cap { font-weight: bold;
14 background-color: #DDDDAA;
15 text-align: center }
16 </style>
17 </head>
18
19 <body>
20 <table class = "cap">
21 <tr>
22 <td>Normal</td>
23 <td>Grayscale</td>
24 </tr>
25 <tr>

OutlineOutline
misc.html
(2 of 2)
26 <td><img src = "hc.jpg" alt =
27 "normal scenic view" /></td>
28 <td><img src = "hc.jpg" style = "filter: gray"
29 alt = "gray scenic view"/>
30 </td>
31 </tr>
32 <tr>
33 <td>Xray</td>
34 <td>Invert</td>
35 </tr>
36 <tr>
37 <td><img src = "hc.jpg" style = "filter: xray"
38 alt = "xray scenic view"/>
39 </td>
40 <td><img src = "hc.jpg" style = "filter: invert"
41 alt = "inverted scenic view"/>
42 </td>
43 </tr>
44 </table>
45
46 </body>
47 </html>

15.6 Adding shadows to Text
• shadow filter
– Showing effect
• Three-dimensional appearance

OutlineOutline
shadow.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Shadow Filter</title>
11
13 <!--
14 var shadowDirection = 0;
15
16 function start()
17 {
18 window.setInterval( "runDemo()", 500 );
19 }
20
21 function runDemo()
22 {
23 shadowText.innerText =
24 "Shadow Direction: " + shadowDirection % 360;

OutlineOutline
shadow.html
(2 of 2)
25 shadowText.filters( "shadow" ).direction =
26 ( shadowDirection % 360 );
27 shadowDirection += 45;
28 }
29 // -->
30 </script>
31 </head>
32
33 <body onload = "start()">
34
35 <h1 id = "shadowText" style = "position: absolute; top: 25;
36 left: 25; padding: 10; filter: shadow( direction = 0,
37 color = red )">Shadow Direction: 0</h1>
38 </body>
39 </html>

15.7 Creating Gradients with alpha
• alpha filter
– Gradient effect
• Gradual progression from starting color to target color
– style
• Uniform opacity (value 0)
• Linear gradient (value 1)
• Circular gradient (value 2)
• Rectangular gradient (value 3)

OutlineOutline
alpha.html
(1 of 3)
4
5 
6 
7
9 <head>
10 <title>Alpha Filter</title>
12 
21 </script>
22 </head>
23
24 <body>
25

OutlineOutline
alpha.html
(2 of 3)
26 <div id = "pic"
27 style = "position: absolute; left:0; top: 0;
28 filter: alpha( style = 2, opacity = 100,
29 finishopacity = 0 )">
30 <img src = "flag.gif" alt = "Flag" />
31 </div>
32
33 <table style = "position: absolute; top: 250; left: 0;
34 background-color: #CCFFCC" border = "1">
35
36 <tr>
37 <td>Opacity (0-100):</td>
38 <td><input type = "text" id = "opacityButton"
39 size = "3" maxlength = "3" value = "100" /></td>
40 </tr>
41
42 <tr>
43 <td>FinishOpacity (0-100):</td>
44 <td><input type = "text" id = "opacityButton2"
45 size = "3" maxlength = "3" value = "0" /></td>
46 </tr>
47
48 <tr>
49 <td>Style:</td>
50 <td><select id = "styleSelect">

OutlineOutline
alpha.html
(3 of 3)
51 <option value = "1">Linear</option>
52 <option value = "2" selected = "selected">
53 Circular</option>
54 <option value = "3">Rectangular</option>
55 </select></td>
56 </tr>
57
58 <tr>
59 <td align = "center" colspan = "2">
60 <input type = "button" value = "Apply"
61 onclick = "run()" />
62 </td>
63 </tr>
64 </table>
65
66 </body>
67 </html>

15.8 Making Text glow
• glow filter adds an aura of color around text

OutlineOutline
glow.html
(1 of 4)
4
5 
6 
7
9 <head>
10 <title>Glow Filter</title>
12 <!--
13 var strengthIndex = 1;
14 var counter = 1;
15 var upDown = true;
16 var colorArray = [ "FF0000", "FFFF00", "00FF00",
17 "00FFFF", "0000FF", "FF00FF" ];
18 function apply()
19 {
20 glowSpan.filters( "glow" ).color =
21 parseInt( glowColor.value, 16 );
22 glowSpan.filters( "glow" ).strength =
23 glowStrength.value;
24 }
25

OutlineOutline
glow.html
(2 of 4)
26 function startdemo()
27 {
28 window.setInterval( "rundemo()", 150 );
29 }
30
31 function rundemo()
32 {
33 if ( upDown ) {
35 strengthIndex++;
36 }
37 else {
39 strengthIndex--;
40 }
41
42 if ( strengthIndex == 1 ) {
43 upDown = !upDown;
44 counter++;
45 glowSpan.filters( "glow" ).color =
46 parseInt( colorArray[ counter % 6 ], 16 );
47 }
48
49 if ( strengthIndex == 10 ) {

OutlineOutline
glow.html
(3 of 4)
51 }
52 }
53 // -->
54 </script>
55 </head>
56
57 <body style = "background-color: #00AAAA">
58 <h1>Glow Filter:</h1>
59
60 <span id = "glowSpan" style = "position: absolute;
61 left: 200;top: 100; padding: 5; filter: glow(
62 color = red, strength = 5 ); font-size: 2em">
63 Glowing Text
64 </span>
65
66 <table border = "1" style = "background-color: #CCFFCC">
67 <tr>
68 <td>Color (Hex)</td>
69 <td><input id = "glowColor" type = "text" size = "6"
70 maxlength = "6" value = "FF0000" /></td>
71 </tr>
72 <tr>
73 <td>Strength (1-255)</td>
74 <td><input id = "glowStrength" type = "text"
75 size = "3" maxlength = "3" value = "5" />

OutlineOutline
glow.html
(4 of 4)
76 </td>
77 </tr>
78 <tr>
79 <td colspan = "2">
81 onclick = "apply()" />
82 <input type = "button" value = "Run Demo"
83 onclick = "startdemo()" /></td>
84 </tr>
85 </table>
86
87 </body>
88 </html>

15.9 Creating Motion with blur
• blur filter creates an illusion of motion by
blurring text or images in a certain direction
– Add
• Adds a copy of the original image over the blurred image
– Direction
• Determines in which direction the blur filter is applied
– strength
• Determines how strong the blurring effect is

OutlineOutline
blur.html
(1 of 5)
4
5 
6 
7
9 <head>
10 <title>Blur Filter</title>
12 <!--
13 var strengthIndex = 1;
14 var blurDirection = 0;
15 var upDown = 0;
16 var timer;
17
18 function reBlur()
19 {
20 blurImage.filters( "blur" ).direction =
21 document.forms( "myForm" ).Direction.value;
22 blurImage.filters( "blur" ).strength =
23 document.forms( "myForm" ).Strength.value;
24 blurImage.filters( "blur" ).add =
25 document.forms( "myForm" ).AddBox.checked;

OutlineOutline
blur.html
(2 of 5)
26 }
27
28 function startDemo()
29 {
30 timer = window.setInterval( "runDemo()", 5 );
31 }
32
33 function runDemo( )
34 {
35 document.forms( "myForm" ).Strength.value =
36 strengthIndex;
37 document.forms( "myForm" ).Direction.value =
38 ( blurDirection % 360 );
39
40 if ( strengthIndex == 35 || strengthIndex == 0 )
42
43 blurImage.filters( "blur" ).strength =
44 ( upDown ? strengthIndex++ : strengthIndex-- );
45
46 if ( strengthIndex == 0 )
47 blurImage.filters( "blur" ).direction =
48 ( ( blurDirection += 45 ) % 360 );
49 }
50 // -->

OutlineOutline
blur.html
(3 of 5)
51 </script>
52 </head>
53
54 <body>
55 <form name = "myForm" action = "">
56
57 <table border = "1" style = "background-color: #CCFFCC">
58 <caption>Blur filter controls</caption>
59
60 <tr>
61 <td>Direction:</td>
62 <td><select name = "Direction">
63 <option value = "0">above</option>
64 <option value = "45">above-right</option>
65 <option value = "90">right</option>
66 <option value = "135">below-right</option>
67 <option value = "180">below</option>
68 <option value = "225">below-left</option>
69 <option value = "270">left</option>
70 <option value = "315">above-left</option>
71 </select></td>
72 </tr>
73
74 <tr>
75 <td>Strength:</td>

OutlineOutline
blur.html
(4 of 5)
76 <td><input name = "Strength" size = "3" type = "text"
77 maxlength = "3" value = "0" /></td>
78 </tr>
79
80 <tr>
81 <td>Add original?</td>
82 <td><input type = "checkbox" name = "AddBox" /></td>
83 </tr>
84
85 <tr>
86 <td align = "center" colspan = "2">
88 onclick = "reBlur();" /></td>
89 </tr>
90
91 <tr>
92 <td colspan = "2">
93 <input type = "button" value = "Start demo"
94 onclick = "startDemo();" />
95 <input type = "button" value = "Stop demo"
96 onclick = "window.clearInterval( timer );" /></td>
97 </tr>
98
99 </table>
100 </form>

OutlineOutline
blur.html
(5 of 5)
101
102 <div id = "blurImage" style = "position: absolute;
103 top: 0; left: 300; padding: 0; filter: blur(
104 add = 0, direction = 0, strength = 0 );
105 background-color: white;">
106 <img align = "middle" src = "shapes.gif"
107 alt = "Shapes" />
108 </div>
109
110 </body>
111 </html>

15.10 Using the wave Filter
• wave filter allows user to apply sine-wave
distortions to text and images on Web pages
– add
• Adds a copy of the text or image underneath the filtered effect
– freq
• Determines the frequency of the wave applied
– phase
• Indicates the phase shift of the wave

OutlineOutline
wave.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Wave Filter</title>
11
13 <!--
14 var wavePhase = 0;
15
16 function start()
17 {
18 window.setInterval( "wave()", 5 );
19 }
20
21 function wave()
22 {
23 wavePhase++;
24 flag.filters( "wave" ).phase = wavePhase;
25 }

OutlineOutline
wave.html
(2 of 2)
26 // -->
27 </script>
28 </head>
29
30 <body onload = "start();">
31
32 <span id = "flag"
33 style = "align: center; position: absolute;
34 left: 30; padding: 15;
35 filter: wave(add = 0, freq = 1, phase = 0,
36 strength = 10); font-size: 2em">
37 Here is some waaaavy text
38 </span>
39
40 </body>
41 </html>

15.11 Advanced Filters: dropShadow and
light
• dropShadow
– Creates a blacked-out version of the image, and places it
behind the image
– offx and offy properties
• Determined by how many pixels the drop shadow is offset
– color property
• Specifies the color of the drop shadow
• light filters
– Most powerful and advanced filter in Internet Explorer 6.0
– Allows simulation of a light source shining on Web page
– All parameters and methods are set by scripting
– addPoint
• Adds a point light source

OutlineOutline
dropshadow.html
(1 of 3)
4
5 
6 
7
9 <head>
10 <title>DHTML dropShadow and light Filters</title>
11
13 <!--
14 function setlight( )
15 {
16 dsImg.filters( "light" ).addPoint( 150, 150,
17 125, 255, 255, 255, 100 );
18 }
19
20 function run()
21 {
22 eX = event.offsetX;
23 eY = event.offsetY;
24

OutlineOutline
dropshadow.html
(2 of 3)
25 xCoordinate = Math.round(
26 eX-event.srcElement.width / 2, 0 );
27 yCoordinate = Math.round(
28 eY-event.srcElement.height / 2, 0 );
29
30 dsImg.filters( "dropShadow" ).offx =
31 xCoordinate / -3;
32 dsImg.filters( "dropShadow" ).offy =
33 yCoordinate / -3;
34
35 dsImg.filters( "light" ).moveLight(
36 0, eX, eY, 125, 1 );
37 }
38 // -->
39 </script>
40 </head>
41
42 <body onload = "setlight()" style = "background-color: green">
43
44 <img id = "dsImg" src = "circle.gif"
45 style = "top: 100; left: 100; filter: dropShadow(
46 offx = 0, offy = 0, color = black ) light()"
47 onmousemove = "run()" alt = "Circle Image" />
48

OutlineOutline
dropshadow.html
(3 of 3)
49 </body>
50 </html>

OutlineOutline
conelight.html
(1 of 3)
4
5 
6 
7
9 <head><title>Cone lighting</title>
10
12 var upDown = true;
13 var counter = 0;
14 var moveRate = -2;
15
16 function setLight()
17 {
18 marquee.filters( "light" ).addCone( 0, marquee.height,
19 8, marquee.width / 2, 30, 255, 150, 255, 50, 15 );
20 marquee.filters( "light" ).addCone( marquee.width,
21 marquee.height, 8, 200, 30, 150, 255, 255, 50, 15 );
22 marquee.filters( "light" ).addCone( marquee.width / 2,
23 marquee.height, 4, 200, 100, 255, 255, 150, 50, 50 );
24
25 window.setInterval( "display()", 100 );

OutlineOutline
conelight.html
(2 of 3)
26 }
27
28 function display()
29 {
30 counter++;
31
32 if ( ( counter % 30 ) == 0 )
34
35 if ( ( counter % 10 ) == 0 )
36 moveRate *= -1;
37
38 if ( upDown ) {
39 marquee.filters( "light" ).moveLight(
40 0, -1, -1, 3, 0 );
42 1, 1, -1, 3, 0 );
44 2, moveRate, 0, 3, 0);
45 }
46 else {
48 0, 1, 1, 3, 0 );
50 1, -1, 1, 3, 0 );

OutlineOutline
conelight.html
(3 of 3)
52 2, moveRate, 0, 3, 0) ;
53 }
54 }
55 </script>
56 </head>
57 <body style = "background-color: #000000"
58 onload = "setLight()">
59
60 <img id = "marquee" src = "marquee.gif"
61 style = "filter: light; position: absolute; left: 25;
62 top: 25" alt = "Deitel movie marquee" />
63
64 </body>
65 </html>

15.12 blendTrans Transition
• Example of the blendTrans transition
– Creates a smooth fade-in/fade-out effect

OutlineOutline
blendtrans.html
(1 of 2)
4
5    
6    
7
9     <head>
10    <title>Using blendTrans</title>
11
13    
21    </script>
22    </head>

OutlineOutline
blendtrans.html
(2 of 2)
23
24    <body>
25
26    <div id = "textInput" onclick = "blendOut()" style =
27    "width: 300; filter: blendTrans( duration = 3 )">
28    <h1>Some fading text</h1>
29    </div>
30
31    </body>
32   </html>

OutlineOutline
blendtrans2.html
(1 of 3)
4
5    
6    
7
9     <head>
10    <title>Blend Transition II</title>
11
13    <!--
14    var whichImage = true;
15
16    function blend()
17    {
18    if ( whichImage ) {
19    image1.filters( "blendTrans" ).apply();
20    image1.style.visibility = "hidden";
21    image1.filters( "blendTrans" ).play();
22    }
23    else {
24    image2.filters( "blendTrans" ).apply();

OutlineOutline
blendtrans2.html
(2 of 3)
26    image2.filters( "blendTrans" ).play();
27    }
28    }
29
30    function reBlend( fromImage )
31    {
32    if ( fromImage ) {
33    image1.style.zIndex -= 2;
34    image1.style.visibility = "visible";
35    }
36    else {
37    image1.style.zIndex += 2;
39    }
40
41    whichImage = !whichImage;
42    blend();
43    }
44    // -->
45    </script>
46    </head>
47
48    <body style = "color: darkblue; background-color: lightblue"
49    onload = "blend()">
50

OutlineOutline
blendtrans2.html
(3 of 3)
51    <h1>Blend Transition Demo</h1>
52
53    <img id = "image2" src = "cool12.jpg"
54    onfilterchange = "reBlend( false )"
55    style = "position: absolute; left: 50; top: 50;
56    width: 300; filter: blendTrans( duration = 4 );
57    z-index: 1" alt = "First Transition Image" />
58
59    <img id = "image1" src = "cool8.jpg"
60    onfilterchange = "reBlend( true )"
62    width: 300; filter: blendTrans( duration = 4 );
63    z-index: 2" alt = "Second Transition Image" />
64
65    </body>
66   </html>

15.13 revealTrans Transition
• revealTrans filter
– Create professional-style transitions
– From box out to random dissolve

OutlineOutline
revealtrans.html
(1 of 4)
4
5    
6    
7
9     <head>
10    <title>24 DHTML Transitions</title>
11
13    <!--
14    var transitionName =
15    ["Box In", "Box Out",
16    "Circle In", "Circle Out",
17    "Wipe Up", "Wipe Down", "Wipe Right", "Wipe Left",
18    "Vertical Blinds", "Horizontal Blinds",
19    "Checkerboard Across", "Checkerboard Down",
20    "Random Dissolve",
21    "Split Vertical In", "Split Vertical Out",
22    "Split Horizontal In", "Split Horizontal Out",
23    "Strips Left Down", "Strips Left Up",
24    "Strips Right Down", "Strips Right Up",
25    "Random Bars Horizontal", "Random Bars Vertical",
26    "Random" ];

OutlineOutline
revealtrans.html
(2 of 4)
27
28    var counter = 0;
29    var whichImage = true;
30
31    function blend()
32    {
33    if ( whichImage ) {
34    image1.filters( "revealTrans" ).apply();
36    image1.filters( "revealTrans" ).play();
37    }
38    else {
39    image2.filters( "revealTrans" ).apply();
41    image2.filters( "revealTrans" ).play();
42    }
43    }
44
45    function reBlend( fromImage )
46    {
47    counter++;
48
49    if ( fromImage ) {
50    image1.style.zIndex -= 2;

OutlineOutline
revealtrans.html
(3 of 4)
52    image2.filters( "revealTrans" ).transition =
53    counter % 24;
54    }
55    else {
56    image1.style.zIndex += 2;
58    image1.filters( "revealTrans" ).transition =
59    counter % 24;
60    }
61
62    whichImage = !whichImage;
63    blend();
64    transitionDisplay.innerHTML = "Transition " +
65    counter % 24 + ": " + transitionName[ counter % 24 ];
66    }
67    // -->
68    </script>
69    </head>
70
71    <body style = "color: white; background-color: lightcoral"
72    onload = "blend()">
73

OutlineOutline
revealtrans.html
(4 of 4)
74    <img id = "image2" src = "icontext.gif"
76    width: 300; z-index:1; visibility: visible;
77    filter: revealTrans( duration = 2, transition = 0 )"
78    onfilterchange = "reBlend( false )" alt =
79    "Programming Tips" />
80
81    <img id = "image1" src = "icons2.gif"
83    width: 300; z-index:1; visibility: visible;
84    filter: revealTrans( duration = 2, transition = 0 )"
85    onfilterchange = "reBlend( true )" alt = "Icons" />
86
87    <div id = "transitionDisplay" style = "position: absolute;
88    top: 70; left: 80">Transition 0: Box In</div>
89
90    </body>
91   </html>

Dynamic HTML

More Related Content

Similar to Dynamic HTML (20)

More from Vinil Patel (14)

Recently uploaded (20)

Dynamic HTML