Chapter 17 Dynamic HTML Filters and Transitions Outline

17. 1 Introduction • Many visual effects implemented in client-side browser – No server-side

17. 2 Flip filters: flipv and fliph • flipv filter – Mirrors text or

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4<!--

34 <TR> 35 <!-- More than one filter can be applied at once -->

17. 3 Transparency with the chroma Filter • chroma filter – Apply transparency effects

33 34<IMG ID = "chroma. Img" SRC = "trans. gif" STYLE = 35 "position:

Changing values of the chroma filter 2000 Deitel & Associates, Inc. All rights reserved.

17. 4 Creating Image masks • mask filter – Create an image mask •

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> Outline 3

Using the mask filter 2000 Deitel & Associates, Inc. All rights reserved.

17. 5 Miscellaneous Image filters: invert, gray and xray • invert filter – Negative

32 </TABLE> 33 Outline 34 </BODY> 35 </HTML> 2000 Deitel & Associates, Inc. All

17. 6 Adding shadows to Text • shadow filter – Creates shadowing effect –

32 left: 50; padding: 10; filter: shadow( direction = 0, 33 color = red

17. 7 Creating Gradients with alpha • Gradient effect – Gradual progression from starting

33 <TD><INPUT TYPE = "text" ID = "opacity. Button" SIZE = "3" 34 35

Applying the alpha filter 2000 Deitel & Associates, Inc. All rights reserved.

17. 8 Making Text glow • glow filter – Add aura of color around

1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 <HTML>

32 else 33 glow. Span. filters( "glow" ). strength = strength. Index--; 34 35

63 </TR> 64 <TR> 65 <TD>Strength (1 -255)</TD> 66 <TD><INPUT ID = "glow. Strength"

17. 9 Creating Motion with blur • blur filter – Creates illusion of motion

33 document. forms( "my. Form" ). Direction. value = 34 ( blur. Direction %

97<DIV ID = "blur. Image" STYLE = "position: absolute; top: 0; 98 left: 300;

Using the blur filter with the add property false, then true 2000 Deitel &

17. 10 Using the wave Filter • wave filter – Apply sine-wave distortions to

32 <H 1>Here's some waaaavy text </H 1> 33 </SPAN> 34 35 </BODY> 36

17. 11 Advanced Filters: drop. Shadow and light • drop. Shadow filter – Places

17. 11 Advanced Filters: drop. Shadow and light (II) • Light filter – Simulates

33<BODY ONLOAD = "setlight()" STYLE = "background-color: green" > 34 Outline 35<IMG ID =

Applying light filter with a drop. Shadow 2000 Deitel & Associates, Inc. All rights

33 if ( ( counter % 10 ) == 0 ) 34 move. Rate

Dynamic cone source lighting 2000 Deitel & Associates, Inc. All rights reserved.

17. 12 Transitions I: Filter blend. Trans • Transitions – Set as values of

Using the blend. Trans transition 2000 Deitel & Associates, Inc. All rights reserved.

33 else { 34 image 1. style. z. Index += 2; 35 image 2.

Blending between images with blend. Trans 2000 Deitel & Associates, Inc. All rights reserved.

17. 13 Transitions II: Filter reveal. Trans • reveal. Trans filter – Transition using

33 34 35 36 37 38 39 40 41 42 43 44 45 46

65 ONLOAD = "blend()"> 66 67 <IMG ID = "image 2" SRC = "icontext.

Transitions using reveal. Trans 2000 Deitel & Associates, Inc. All rights reserved.

Transitions using reveal. Trans (II) 2000 Deitel & Associates, Inc. All rights reserved.

Transitions using reveal. Trans (III) 2000 Deitel & Associates, Inc. All rights reserved.

Transitions using reveal. Trans (IV) 2000 Deitel & Associates, Inc. All rights reserved.

Slides: 56

Download presentation

Chapter 17 – Dynamic HTML: Filters and Transitions Outline 17. 1 17. 2 17. 3 17. 4 17. 5 17. 6 17. 7 17. 8 17. 9 17. 10 17. 11 17. 12 17. 13 Introduction Flip filters: flipv and fliph Transparency with the chroma Filter Creating Image masks Miscellaneous Image filters: invert, gray and xray Adding shadows to Text Creating Gradients with alpha Making Text glow Creating Motion with blur Using the wave Filter Advanced Filters: drop. Shadow and light Transitions I: Filter blend. Transitions II: Filter reveal. Trans 2000 Deitel & Associates, Inc. All rights reserved.

17. 1 Introduction • Many visual effects implemented in client-side browser – No server-side processing delays – DHTML code usually small • Filters – Cause changes to text and images – Persistent • Transitions – Transfer from page to page – Temporary • Filters and transitions built into Windows IE 5 – CSS filter property – Can only be applied to block-level elements or inline-level elements which have height or width CSS properties set 2000 Deitel & Associates, Inc. All rights reserved.

17. 2 Flip filters: flipv and fliph • flipv filter – Mirrors text or images vertically • fliph filter – Mirrors text or images horizontally • Filters applied in the STYLE attribute – <TD STYLE = “filter: flipv fliph”> 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4 5 6 7<HEAD> 8<TITLE>The flip filter</TITLE> 9 10<STYLE TYPE = "text/css"> 11 BODY { background-color: #CCFFCC } 12 13 TABLE { font-size: 3 em; 14 font-family: Arial, sans-serif; 15 background-color: #FFCCCC; 16 border-style: ridge ; 17 border-collapse: collapse } 18 19 TD { border-style: groove; 20 padding: 1 ex } 21</STYLE> 22</HEAD> 23 24<BODY> 25 26<TABLE> 27 28 <TR> 29  30 <TD STYLE = "filter: fliph">Text</TD> 31 <TD>Text</TD> 32 </TR> 2000 Deitel & Associates, Inc. All rights reserved. 33 Outline 1. Apply flipv and fliph filters using the STYLE attribute

34 <TR> 35  36 <TD STYLE = "filter: flipv fliph">Text</TD> 37 <TD STYLE = "filter: flipv">Text</TD> 38 </TR> 39 40 </TABLE> 41 42 </BODY> 43 </HTML> 2000 Deitel & Associates, Inc. All rights reserved. Outline 2. Page rendered by browser

17. 3 Transparency with the chroma Filter • chroma filter – Apply transparency effects dynamically • Each filter has a property enabled – If set to true, filter applied – If set to false, filter not applied • ONCHANGE event – Fires whenever the VALUE of a form field changes 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4 5 6 7<HEAD> 8<TITLE>Chroma Filter</TITLE> 9 10<SCRIPT LANGUAGE = "Java. Script"> 11 12 function changecolor() 13 { 14 if ( color. Select. value ) { // if the user selected a color, 15 16 // parse the value to hex and set the filter color. 17 chroma. Img. filters( "chroma" ). color = 18 parse. Int( color. Select. value, 16 ); 19 chroma. Img. filters( "chroma" ). enabled = true; 20 } 21 else // if the user selected "None", 22 23 // disable the filter. 24 chroma. Img. filters( "chroma" ). enabled = false; 25 } 26 27</SCRIPT> 28</HEAD> 29 30<BODY> 31 2000 Deitel & Associates, Inc. All rights reserved. 32<H 1>Chroma Filter: </H 1> Outline 1. Define function changecolor 2. 1. 1 use parse. Int function to convert value to hexadecimal integer

33 34<IMG ID = "chroma. Img" SRC = "trans. gif" STYLE = 35 "position: absolute; filter: chroma" > 36 37 38<SELECT ID = "color. Select" ONCHANGE = "changecolor()"> 39 <OPTION VALUE = "">None 40 <OPTION VALUE = "00 FFFF">Cyan 41 <OPTION VALUE = "FFFF 00">Yellow 42 <OPTION VALUE = "FF 00 FF">Magenta 43 <OPTION VALUE = "000000" SELECTED>Black 44</SELECT> 45 46</BODY> 47</HTML> 2000 Deitel & Associates, Inc. All rights reserved. Outline

17. 4 Creating Image masks • mask filter – Create an image mask • Background of element solid color • Foreground of element transparent to image or color behind • color parameter specifies mask color 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> Outline 3 4 5 6 2. 1. 1 Specify color parameter 7<HEAD> 8<TITLE>Mask Filter</TITLE> 9</HEAD> 10 11<BODY> 12 13<H 1>Mask Filter</H 1> 14 15 16 17<DIV STYLE = "position: absolute; top: 125; left: 20; 18 filter: mask( color = #CCFFFF )" > 19<H 1 STYLE = "font-family: Courier, monospace" > 20 Aa. Bb. Cc. Dd. Ee. Ff. Gg. Hh. Ii. Jj<BR> 21 Kk. Ll. Mm. Nn. Oo. Pp. Qq. Rr. Ss. Tt 22</H 1> 23</DIV> 24 25<IMG SRC = "gradient. gif" WIDTH = "400" HEIGHT = "200"> 26</BODY> 2000 Deitel & Associates, Inc. All rights reserved. 27</HTML>

17. 5 Miscellaneous Image filters: invert, gray and xray • invert filter – Negative image effect • Dark areas become light • Light areas become dark – Good use of invert filter: • Signify something has just been clicked or selected • gray filter – Grayscale image effect • Color stripped from image • All that remains is brightness data • xray filter – Xray effect • Inversion of grayscale effect 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4 5 6 7<HEAD> 8<TITLE>Misc. Image filters</TITLE> 9 10<STYLE TYPE = "text/css"> 11. cap { font-weight: bold; 12 background-color: #DDDDAA; 13 text-align: center } 14</STYLE> 15</HEAD> 16 17<BODY> 18<TABLE> 19 <TR CLASS = "cap"> 20 <TD>Normal</TD> 21 <TD>Grayscale</TD> 22 <TD>Xray</TD> 23 <TD>Invert</TD> 24 </TR> 25 26 <TR> 27 <TD><IMG SRC = "harvey. jpg"></TD> 28 <TD><IMG SRC = "harvey. jpg" STYLE = "filter: gray"></TD> 29 <TD><IMG SRC = "harvey. jpg" STYLE = "filter: xray"></TD> 30 <TD><IMG SRC = "harvey. jpg" STYLE = "filter: invert"></TD> 2000</TR> Deitel & Associates, Inc. All rights reserved. 31 Outline 1. Apply invert, gray and xray filters to harvey. jpg

17. 6 Adding shadows to Text • shadow filter – Creates shadowing effect – Property direction • Direction of shadow • 0 (up), 45 (above-right), 90 (right), 135 (below-right), 180 (below), 225 (below-left), 270 (left) and 315 (above-left) – Property color • Increase padding if cut off by element borders 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4 5 6 7<HEAD> 8<TITLE>Shadow Filter</TITLE> 9 10<SCRIPT LANGUAGE = "Java. Script"> 11 var shadow. Direction = 0; 12 13 function start() 14 { 15 window. set. Interval( "run. Demo()", 500 ); 16 } 17 18 function run. Demo() 19 { 20 shadow. Text. inner. Text = 21 "Shadow Direction: " + shadow. Direction % 360; 22 shadow. Text. filters( "shadow" ). direction = 23 ( shadow. Direction % 360 ); 24 shadow. Direction += 45; 25 } 26</SCRIPT> 27</HEAD> 28 29<BODY ONLOAD = "start()"> 30 2000 ID Deitel Associates, Inc. All rights =reserved. 31<H 1 = & "shadow. Text" STYLE "position: absolute; top: 50; Outline 1. Define function run. Demo to cycle through all values of direction property

32 left: 50; padding: 10; filter: shadow( direction = 0, 33 color = red )">Shadow Direction: 0</H 1> Outline 34</BODY> 35</HTML> 2. Page rendered by browser (at different times) 2. 1 Apply padding so shadow effect is not cut off 2000 Deitel & Associates, Inc. All rights reserved.

17. 7 Creating Gradients with alpha • Gradient effect – Gradual progression from starting color to target color • alpha filter – style property • What style opacity applied – – 0: uniform opacity 1: linear gradient 2: circular gradient 3: rectangular gradient – opacity and finishopacity properties • Percentages for opacity of specified gradient – start. X, start. Y, finish. X, finish. Y • Specify x-y coordinates for start and finish of gradient 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4 5 6 7<HEAD> 8<TITLE>Alpha Filter</TITLE> 9<SCRIPT LANGUAGE = "Java. Script"> 10 function run() 11 { 12 pic. filters( "alpha" ). opacity = opacity. Button. value; 13 pic. filters( "alpha" ). finishopacity = opacity. Button 2. value; 14 pic. filters( "alpha" ). style = style. Select. value; 15 } 16</SCRIPT> 17</HEAD> 18 19<BODY> 20 21<DIV ID = "pic" 22 STYLE = "position: absolute; left: 0; top: 0; 23 filter: alpha( style = 2, opacity = 100, 24 finishopacity = 0 )"> 25 <IMG SRC = "flag. gif"> 26</DIV> 27 28<TABLE STYLE = "position: absolute; top: 250; left: 0; 29 background-color: #CCFFCC" BORDER = "1"> 30 31 <TR> 2000 Deitel & Associates, (0 -100): </TD> Inc. All rights reserved. 32 <TD>Opacity Outline 1. Applying the alpha filter to a DIV element containing an image

33 <TD><INPUT TYPE = "text" ID = "opacity. Button" SIZE = "3" 34 35 MAXLENGTH = "3" VALUE = "100"></TD> </TR> 36 37 <TR> 38 <TD>Finish. Opacity (0 -100): </TD> 39 <TD><INPUT TYPE = "text" ID = "opacity. Button 2" SIZE = "3" 40 41 MAXLENGTH = "3" VALUE = "0"></TD> </TR> 42 43 <TR> 44 <TD>Style: </TD> 45 <TD><SELECT ID = "style. Select"> 46 <OPTION VALUE = "1">Linear 47 <OPTION VALUE = "2" SELECTED>Circular 48 <OPTION VALUE = "3">Rectangular 49 </SELECT></TD> 50 </TR> 51 52 53 <TR> <TD ALIGN = "center" COLSPAN = "2"><INPUT TYPE = "button" 54 55 VALUE = "Apply" ONCLICK = "run()"></TD> </TR> 56</TABLE> 57 58</BODY> 2000 Deitel & Associates, Inc. All rights reserved. 59</HTML> Outline

17. 8 Making Text glow • glow filter – Add aura of color around text – Specify color and strength – Add padding if large strength cuts off effect with element borders 2000 Deitel & Associates, Inc. All rights reserved.

1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 <HTML> 3 4  5  6 7 <HEAD> 8 <TITLE>Glow Filter</TITLE> 9 <SCRIPT LANGUAGE = "Java. Script"> 10 var strength. Index = 1; 11 var counter = 1; 12 var up. Down = true; 13 var color. Array = [ "FF 0000", "FFFF 00", "00 FF 00", 14 "00 FFFF", "0000 FF", "FF 00 FF" ]; 15 function apply() 16 { 17 glow. Span. filters( "glow" ). color = 18 parse. Int( glow. Color. value, 16); 19 glow. Span. filters( "glow" ). strength = 20 glow. Strength. value; 21 } 22 23 function startdemo() 24 { 25 window. set. Interval( "rundemo()", 150 ); 26 } 27 28 function rundemo() 29 { 30 if ( up. Down ) 2000 Deitel & glow. Span. filters( Associates, Inc. All rights "glow" reserved. ). strength = strength. Index++; 31 Outline 1. 1 Define functions apply, startdemo and rundemo

32 else 33 glow. Span. filters( "glow" ). strength = strength. Index--; 34 35 if ( strength. Index == 1 ) { 36 up. Down = !up. Down; 37 counter++; 38 glow. Span. filters( "glow" ). color = 39 parse. Int( color. Array[ counter % 6 ], 16 ); 40 } 41 42 if ( strength. Index == 10 ) { 43 up. Down = !up. Down; 44 } 45 } 46</SCRIPT> 47</HEAD> 48 49<BODY STYLE = "background-color: #00 AAAA" > 50<H 1>Glow Filter: </H 1> 51 52<SPAN ID = "glow. Span" STYLE = "position: absolute; left: 200; 53 top: 100; padding: 5; filter: glow( color = red, 54 strength = 5 )"> 55 <H 2>Glowing Text</H 2> 56</SPAN> 57 58<TABLE BORDER = 1 STYLE = "background-color: #CCFFCC" > 59 <TR> 60 <TD>Color (Hex)</TD> 61 <TD><INPUT ID = "glow. Color" TYPE = "text" SIZE = 6 2000 Deitel & Associates, Inc. rights reserved. 62 MAXLENGTH = 6 All. VALUE = FF 0000></TD> Outline 1. 2 Apply glow filter to SPAN element containing text 2. Increase padding so effect is not cut off by element borders

63 </TR> 64 <TR> 65 <TD>Strength (1 -255)</TD> 66 <TD><INPUT ID = "glow. Strength" TYPE = "text" SIZE = 3 67 MAXLENGTH = 3 VALUE = 5></TD> 68 </TR> 69 <TR> 70 <TD COLSPAN = 2> 71 <INPUT TYPE = "BUTTON" VALUE = "Apply" 72 ONCLICK = "apply()"> 73 <INPUT TYPE = "BUTTON" VALUE = "Run Demo" 74 ONCLICK = "startdemo()"></TD> 75 </TR> 76</TABLE> 77 78</BODY> 79</HTML> 2000 Deitel & Associates, Inc. All rights reserved. Outline 2. Page rendered by browser

17. 9 Creating Motion with blur • blur filter – Creates illusion of motion – Blurs text or images in a certain direction – Three properties: • add – true adds a copy of original image over blurred image • direction – Angular form (like shadow filter) • strength – Strength of blur effect 2000 Deitel & Associates, Inc. All rights reserved.

1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 <HTML> 3 4  5  6 7 <HEAD> 8 <TITLE>Blur Filter</TITLE> 9 <SCRIPT LANGUAGE = "Java. Script"> 10 var strength. Index = 1; 11 var blur. Direction = 0; 12 var up. Down = 0; 13 var timer; 14 15 function re. Blur() 16 { 17 blur. Image. filters( "blur" ). direction = 18 document. forms( "my. Form" ). Direction. value; 19 blur. Image. filters( "blur" ). strength = 20 document. forms( "my. Form" ). Strength. value; 21 blur. Image. filters( "blur" ). add = 22 document. forms( "my. Form" ). Add. checked; 23 } 24 25 function start. Demo() 26 { 27 timer = window. set. Interval( "run. Demo()", 5 ); 28 } 29 30 function run. Demo( ) 31 { 2000 Deitel & Associates, Inc. All"my. Form" rights reserved. 32 document. forms( ). Strength. value = strength. Index; Outline 1. Using the blur filter 2. 1. 2 Various blur parameters

33 document. forms( "my. Form" ). Direction. value = 34 ( blur. Direction % 360 ); 35 36 if( strength. Index == 35 || strength. Index == 0 ) 37 up. Down = !up. Down; 38 39 blur. Image. filters( "blur" ). strength = 40 ( up. Down ? strength. Index++ : strength. Index-- ); 41 42 if ( strength. Index == 0 ) 43 blur. Image. filters( "blur" ). direction = 44 ( ( blur. Direction += 45 ) % 360 ); 45 } 46 47</SCRIPT> 48</HEAD> 49 50<BODY> 51<FORM NAME = "my. Form"> 52 53<TABLE BORDER = "1" STYLE = "background-color: #CCFFCC" > 54<CAPTION>Blur filter controls</CAPTION> 55 56 <TR> 57 <TD>Direction: </TD> 58 <TD><SELECT NAME = "Direction"> 59 <OPTION VALUE = "0">above 60 <OPTION VALUE = "45">above-right 61 <OPTION VALUE = "90">right 62 <OPTION VALUE = "135">below-right 63 <OPTION VALUE = "180">below 2000 Deitel & Associates, Inc. All= rights reserved. 64 <OPTION VALUE "225">below-left Outline

97<DIV ID = "blur. Image" STYLE = "position: absolute; top: 0; 98 left: 300; padding: 0; filter: 99 blur( add = 0, direction = 0, strength = 0 ); 100 background-color: white; " > 101 <IMG ALIGN = "center" SRC = "shapes. gif"> 102</DIV> 103 104</BODY> 105</HTML> 2000 Deitel & Associates, Inc. All rights reserved. Outline 2. Apply blur filter to DIV element containing an image

17. 10 Using the wave Filter • wave filter – Apply sine-wave distortions to text and images – Properties: • add – Adds a copy of text or image underneath filtered effect • freq – Frequency of sine wave » How many complete sine waves applied • phase – Phase shift of sine wave • strength – Amplitude of sine wave – Processor intensive 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> 3 4 5 6 7<HEAD> 8<TITLE>Wave Filter</TITLE> 9 10<SCRIPT LANGUAGE = "Java. Script"> 11 var wave. Phase = 0; 12 13 function start() 14 { 15 window. set. Interval( "wave()", 5 ); 16 } 17 18 function wave() 19 { 20 wave. Phase++; 21 flag. filters( "wave" ). phase = wave. Phase; 22 } 23</SCRIPT> 24</HEAD> 25 26<BODY ONLOAD = "start(); "> 27 28<SPAN ID = "flag" 29 STYLE = "align: center; position: absolute; 30 left: 30; padding: 15; 2000 filter: Deitel & Associates, 31 wave(add. Inc. = All 0, rights freqreserved. = 1, phase = 0, strength = 10)" > Outline 1. Define function start to demonstrate wave filter (with various parameter settings)

17. 11 Advanced Filters: drop. Shadow and light • drop. Shadow filter – Places blacked-out version of image behind original image – Offset by specified number of pixels • offx and offy properties – color property 2000 Deitel & Associates, Inc. All rights reserved.

17. 11 Advanced Filters: drop. Shadow and light (II) • Light filter – Simulates effect of light source – add. Point method • Adds point light source add. Point (x. Source, y. Source, height, R, G, B, strength%); – add. Cone method • Adds a cone light source add. Cone (x. Source, y. Source, height, x. Target, y. Target, R, G, B, strength%); 2000 Deitel & Associates, Inc. All rights reserved.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > <HTML>   <HEAD> <TITLE>DHTML drop. Shadow and light Filters< /TITLE> <SCRIPT LANGUAGE = "Java. Script"> function setlight( ) { ds. Img. filters( "light" ). add. Point( 150, 125, 255, 100); } function run() { e. X = event. offset. X; e. Y = event. offset. Y; x. Coordinate = Math. round( e. X-event. src. Element. width/2, 0 ); y. Coordinate = Math. round( e. Y-event. src. Element. height/2, 0 ); 24 25 ds. Img. filters( 26 ds. Img. filters( 27 28 ds. Img. filters( 29 } 30 </SCRIPT> 31 </HEAD> 2000 Deitel & Associates, Inc. 32 "drop. Shadow" ). offx = x. Coordinate / -3; "drop. Shadow" ). offy = y. Coordinate / -3; "light" ). move. Light(0, e. X, e. Y, 125, 1); All rights reserved. Outline 1. 1 Define function set. Light 1. 2 Use method add. Point to add a point light source 1. 3 Use method move. Light to update position of light source

33<BODY ONLOAD = "setlight()" STYLE = "background-color: green" > 34 Outline 35<IMG ID = "ds. Img" SRC = "circle. gif" 36 STYLE = "top: 100; left: 100; filter: drop. Shadow( offx = 0, 37 offy = 0, color = black ) light() " ONMOUSEMOVE = "run()"> 38 39</BODY> 40</HTML> 2000 Deitel & Associates, Inc. All rights reserved. 2. Add drop. Shadow and light filters to IMG element

1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 <HTML> 3 4  5  6 7 <HEAD><TITLE>Cone lighting</TITLE> 8 9 <SCRIPT LANGUAGE = "Java. Script"> 10 var up. Down = true; 11 var counter = 0; 12 var move. Rate = -2; 13 14 function set. Light() 15 { 16 marquee. filters( "light" ). add. Cone( 0, marquee. height, 8, 17 marquee. width/2, 30, 255, 150, 255, 50, 15 ); 18 marquee. filters( "light" ). add. Cone( marquee. width, 19 marquee. height, 8, 200, 30, 150, 255, 50, 15 ); 20 marquee. filters( "light" ). add. Cone( marquee. width/2, 21 marquee. height, 4, 200, 100, 255, 150, 50 ); 22 23 window. set. Interval( "move. Light()", 100 ); 24 } 25 26 function move. Light() 27 { 28 counter++; 29 30 if ( ( counter % 30 ) == 0 ) 31 up. Down = !up. Down; 2000 Deitel & Associates, Inc. All rights reserved. 32 Outline 1. Use add. Cone method to add cone light source

33 if ( ( counter % 10 ) == 0 ) 34 move. Rate *= -1; Outline 35 36 if ( up. Down ) { 37 marquee. filters( "light" ). move. Light( 0, -1, 3, 0 ); 38 marquee. filters( "light" ). move. Light( 1, 1, -1, 3, 0 ); 39 marquee. filters( "light" ). move. Light(2, move. Rate, 0, 3, 0); 40 } 41 else { 42 marquee. filters( "light" ). move. Light( 0, 1, 1, 3, 0 ); 43 marquee. filters( "light" ). move. Light( 1, -1, 1, 3, 0 ); 44 marquee. filters( "light" ). move. Light(2, move. Rate, 0, 3, 0); 45 46 } } 47</SCRIPT> 48 49<BODY STYLE = "background-color: #000000" ONLOAD = "set. Light()"> 50 51<IMG ID = "marquee" SRC = "marquee. gif" 52 STYLE = "filter: light; position: absolute; left: 100; 53 top: 100"> 54 55</BODY> 56</HTML> 2000 Deitel & Associates, Inc. All rights reserved. 2. move. Light method, when used with cone source, moves the target of the light

17. 12 Transitions I: Filter blend. Trans • Transitions – Set as values of filter CSS property • blend. Trans transition – Creates a smooth fade-in/fade-out effect – Parameter duration • Determines how long the transition will take 2000 Deitel & Associates, Inc. All rights reserved.

1<!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2<HTML> Outline 3 4 5 6 7<HEAD> 8<TITLE>Using blend. Trans</TITLE> 9 10<SCRIPT LANGUAGE = "Java. Script"> 11 function blend. Out() 12 { 13 text. Input. filters( "blend. Trans" ). apply(); 14 text. Input. style. visibility = "hidden"; 15 text. Input. filters( "blend. Trans" ). play(); 16 } 17</SCRIPT> 18</HEAD> 19 20<BODY> 21 22<DIV ID = "text. Input" ONCLICK = "blend. Out()" 23 STYLE = "width: 300; filter: blend. Trans( duration = 3 )" > 24 <H 1>Some fading text</H 1> 25</DIV> 26 27</BODY> 2000 Deitel & Associates, Inc. All rights reserved. 28</HTML> 1. 1 apply method initializes transition 1. 2 Set visibility of element to hidden; takes effect when invoke play

1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 <HTML> 3 4  5  6 7 <HEAD> 8 <TITLE>Blend Transition II</TITLE> 9 10 <SCRIPT LANGUAGE = "Java. Script"> 11 var which. Image = true; 12 13 function blend() 14 { 15 if ( which. Image ) { 16 image 1. filters( "blend. Trans" ). apply(); 17 image 1. style. visibility = "hidden"; 18 image 1. filters( "blend. Trans" ). play(); 19 } 20 else { 21 image 2. filters( "blend. Trans" ). apply(); 22 image 2. style. visibility = "hidden"; 23 image 2. filters( "blend. Trans" ). play(); 24 } 25 } 26 27 function re. Blend ( from. Image ) 28 { 29 if ( from. Image ) { 30 image 1. style. z. Index -= 2; 31 image 1. style. visibility = "visible"; 2000 Deitel & 32 } Associates, Inc. All rights reserved. Outline 1. 1 Define blend function 1. 2 z. Index is Java. Script’s version of z-index

33 else { 34 image 1. style. z. Index += 2; 35 image 2. style. visibility = "visible"; 36 } 37 38 which. Image = !which. Image; 39 blend(); 40 } 41</SCRIPT> 42</HEAD> 43 44<BODY STYLE = "color: darkblue; background-color: lightblue" 45 ONLOAD = "blend()"> 46 47<H 1>Blend Transition Demo</H 1> 48 49<IMG ID = "image 2" SRC = "cool 12. jpg" 50 ONFILTERCHANGE = "re. Blend( false )" 51 STYLE = "position: absolute; left: 50; top: 50; width: 300; 52 filter: blend. Trans( duration = 4 ); z-index: 1" > 53 54<IMG ID = "image 1" SRC = "cool 8. jpg" 55 ONFILTERCHANGE = "re. Blend( true )" 56 STYLE = "position: absolute; left: 50; top: 50; width: 300; 57 filter: blend. Trans( duration = 4 ); z-index: 2" > 58 59</BODY> 2000 Deitel & Associates, Inc. All rights reserved. 60</HTML> Outline 1. 3 BODY tag’s ONLOAD event calls function blend

17. 13 Transitions II: Filter reveal. Trans • reveal. Trans filter – Transition using professional-style transitions – From box out to random dissolve – 24 different transitions 2000 Deitel & Associates, Inc. All rights reserved.

1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" > 2 <HTML> 3 4  5  6 <HEAD> 7 <TITLE>24 DHTML Transitions</TITLE> 8 9 <SCRIPT> 10 var transition. Name = 11 ["Box In", "Box Out", 12 "Circle In", "Circle Out", 13 "Wipe Up", "Wipe Down", "Wipe Right", "Wipe Left", 14 "Vertical Blinds", "Horizontal Blinds", 15 "Checkerboard Across", "Checkerboard Down", 16 "Random Dissolve", 17 "Split Vertical In", "Split Vertical Out", 18 "Split Horizontal In", "Split Horizontal Out", 19 "Strips Left Down", "Strips Left Up", 20 "Strips Right Down", "Strips Right Up", 21 "Random Bars Horizontal", "Random Bars Vertical", 22 "Random"]; 23 24 var counter = 0; 25 var which. Image = true; 26 27 function blend() 28 { 29 if ( which. Image ) { 30 image 1. filters( "reveal. Trans" ). apply(); 31 image 1. style. visibility = "hidden"; 2000 Deitel & Associates, Inc. All rights reserved. 32 image 1. filters( "reveal. Trans" ). play(); Outline 1. Cycle through 24 transitions using reveal. Trans 2. 1. 1 Create array containing different transition names

33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 } else { image 2. filters( "reveal. Trans" ). apply(); image 2. style. visibility = "hidden"; image 2. filters( "reveal. Trans" ). play(); } } function re. Blend( from. Image ) { counter++; if ( from. Image ) { image 1. style. z. Index -= 2; image 1. style. visibility = "visible"; image 2. filters("reveal. Trans"). transition = counter % 24; 49 50 51 52 53 } else { image 1. style. z. Index += 2; image 2. style. visibility = "visible"; image 1. filters("reveal. Trans"). transition = counter % 24; 54 55 56 57 58 } which. Image = !which. Image; blend(); transition. Display. inner. HTML = "Transition " + counter % 24 + 59 ": <BR> " + transition. Name[ counter % 24 ]; 60 } 61 </SCRIPT> 62 </HEAD> 63 2000 Deitel & Associates, Inc. Allwhite; rights reserved. 64 <BODY STYLE = "color: background-color: lightcoral" Outline

65 ONLOAD = "blend()"> 66 67 <IMG ID = "image 2" SRC = "icontext. gif" 68 STYLE = "position: absolute; left: 10; top: 10; 69 width: 300; z-index: 1; visibility: visible; 70 filter: reveal. Trans( duration = 2, transition = 0 )" 71 ONFILTERCHANGE = "re. Blend( false )"> 72 73 <IMG ID = "image 1" SRC = "icons 2. gif" 74 STYLE = "position: absolute; left: 10; top: 10; 75 width: 300; z-index: 1; visibility: visible; 76 filter: reveal. Trans( duration = 2, transition = 0 )" 77 ONFILTERCHANGE = "re. Blend( true )"> 78 79<DIV ID = "transition. Display" STYLE = "position: absolute; 80 top: 10; left: 325">Transition 0: <BR> Box In</DIV> 81 82</BODY> 83</HTML> 2000 Deitel & Associates, Inc. All rights reserved. Outline