+ All Categories
Home > Documents > flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright...

flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright...

Date post: 07-Apr-2018
Category:
Upload: doanhanh
View: 222 times
Download: 2 times
Share this document with a friend
29
562 Dynamic HTML: Filters and Transitions Chapter 17 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook. 17 Dynamic HTML: Filters and Transitions 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 4 <!-- Fig. 17.1: flip.html --> 5 <!-- Using the flip filters --> 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: 3em; 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: 1ex } 21 </STYLE> 22 </HEAD> 23 24 <BODY> 25 26 <TABLE> 27 28 <TR> 29 <!-- Filters are applied in style declarations --> 30 <TD STYLE = "filter: fliph">Text</TD> 31 <TD>Text</TD> 32 </TR> 33 34 <TR> 35 <!-- More than one filter can be applied at once --> 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> Fig. 17.1 Using the flip filter (part 1 of 2). iw3htp_17.fm Page 562 Friday, May 5, 2000 6:08 PM
Transcript
Page 1: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

562 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

17Dynamic HTML:

Filters and Transitions

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig. 17.1: flip.html -->5 <!-- Using the flip filters -->67 <HEAD>8 <TITLE>The flip filter</TITLE>9

10 <STYLE TYPE = "text/css">11 BODY { background-color: #CCFFCC } 1213 TABLE { font-size: 3em;14 font-family: Arial, sans-serif;15 background-color: #FFCCCC;16 border-style: ridge ;17 border-collapse: collapse }1819 TD { border-style: groove;20 padding: 1ex }21 </STYLE>22 </HEAD>2324 <BODY>2526 <TABLE>2728 <TR>29 <!-- Filters are applied in style declarations -->30 <TD STYLE = "filter: fliph">Text</TD>31 <TD>Text</TD>32 </TR>3334 <TR>35 <!-- More than one filter can be applied at once -->36 <TD STYLE = "filter: flipv fliph">Text</TD>37 <TD STYLE = "filter: flipv">Text</TD>38 </TR>3940 </TABLE>4142 </BODY>43 </HTML>

Fig. 17.1 Using the flip filter (part 1 of 2).

iw3htp_17.fm Page 562 Friday, May 5, 2000 6:08 PM

Page 2: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 563

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.1 Using the flip filter (part 2 of 2).

No filters applied

flipv filter applied

fliph filter applied

Both fliph and flipvfilters applied

iw3htp_17.fm Page 563 Friday, May 5, 2000 6:08 PM

Page 3: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

564 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.2: chroma.html -->5 <!-- Applying transparency using the chroma filter -->67 <HEAD>8 <TITLE>Chroma Filter</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">1112 function changecolor()13 { 14 if ( colorSelect.value ) { // if the user selected a color,1516 // parse the value to hex and set the filter color.17 chromaImg.filters( "chroma" ).color = 18 parseInt( colorSelect.value, 16 );19 chromaImg.filters( "chroma" ).enabled = true;20 }21 else // if the user selected "None", 2223 // disable the filter.24 chromaImg.filters( "chroma" ).enabled = false;25 }2627 </SCRIPT>28 </HEAD>2930 <BODY>3132 <H1>Chroma Filter:</H1>3334 <IMG ID = "chromaImg" SRC = "trans.gif" STYLE = 35 "position: absolute; filter: chroma">3637 <!-- The ONCHANGE event fires when a selection is changed -->38 <SELECT ID = "colorSelect" ONCHANGE = "changecolor()">39 <OPTION VALUE = "">None40 <OPTION VALUE = "00FFFF">Cyan41 <OPTION VALUE = "FFFF00">Yellow42 <OPTION VALUE = "FF00FF">Magenta43 <OPTION VALUE = "000000" SELECTED>Black44 </SELECT>4546 </BODY>47 </HTML>

Fig. 17.2 Changing values of the chroma filter (part 1 of 2).

iw3htp_17.fm Page 564 Friday, May 5, 2000 6:08 PM

Page 4: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 565

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.2 Changing values of the chroma filter (part 2 of 2).

iw3htp_17.fm Page 565 Friday, May 5, 2000 6:08 PM

Page 5: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

566 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.3: mask.html -->5 <!-- Placing a mask over an image -->67 <HEAD>8 <TITLE>Mask Filter</TITLE>9 </HEAD>

1011 <BODY>1213 <H1>Mask Filter</H1> 1415 <!-- Filter parameters are specified in parentheses, in -->16 <!-- the form param1 = value1, param2 = value2, etc. -->17 <DIV STYLE = "position: absolute; top: 125; left: 20; 18 filter: mask( color = #CCFFFF )">19 <H1 STYLE = "font-family: Courier, monospace">20 AaBbCcDdEeFfGgHhIiJj<BR>21 KkLlMmNnOoPpQqRrSsTt22 </H1>23 </DIV>2425 <IMG SRC = "gradient.gif" WIDTH = "400" HEIGHT = "200">26 </BODY>27 </HTML>

Fig. 17.3 Using the mask filter .

iw3htp_17.fm Page 566 Friday, May 5, 2000 6:08 PM

Page 6: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 567

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.4: misc.html -->5 <!-- Image filters to invert, grayscale, or xray an image -->67 <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>1617 <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>2526 <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>31 </TR>32 </TABLE>3334 </BODY>35 </HTML>

Fig. 17.4 Filters invert, gray and xray.

iw3htp_17.fm Page 567 Friday, May 5, 2000 6:08 PM

Page 7: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

568 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.5: shadow.html -->5 <!-- Applying the shadow filter -->67 <HEAD>8 <TITLE>Shadow Filter</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 var shadowDirection = 0;1213 function start() 14 {15 window.setInterval( "runDemo()", 500 );16 }1718 function runDemo() 19 {20 shadowText.innerText = 21 "Shadow Direction: " + shadowDirection % 360;22 shadowText.filters( "shadow" ).direction = 23 ( shadowDirection % 360 );24 shadowDirection += 45;25 }26 </SCRIPT>27 </HEAD>2829 <BODY ONLOAD = "start()">3031 <H1 ID = "shadowText" STYLE = "position: absolute; top: 50;32 left: 50; padding: 10; filter: shadow( direction = 0,33 color = red )">Shadow Direction: 0</H1>34 </BODY>35 </HTML>

Fig. 17.5 Applying a shadow filter to text (part 1 of 2).

iw3htp_17.fm Page 568 Friday, May 5, 2000 6:08 PM

Page 8: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 569

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.5 Applying a shadow filter to text (part 2 of 2).

iw3htp_17.fm Page 569 Friday, May 5, 2000 6:08 PM

Page 9: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

570 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.6: alpha.html -->5 <!-- Applying the alpha filter to an image -->67 <HEAD>8 <TITLE>Alpha Filter</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">

10 function run() 11 {12 pic.filters( "alpha" ).opacity = opacityButton.value; 13 pic.filters( "alpha" ).finishopacity = opacityButton2.value;14 pic.filters( "alpha" ).style = styleSelect.value;15 }16 </SCRIPT>17 </HEAD>1819 <BODY>2021 <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>2728 <TABLE STYLE = "position: absolute; top: 250; left: 0;29 background-color: #CCFFCC" BORDER = "1">30 31 <TR>32 <TD>Opacity (0-100):</TD>33 <TD><INPUT TYPE = "text" ID = "opacityButton" SIZE = "3"34 MAXLENGTH = "3" VALUE = "100"></TD>35 </TR>36 37 <TR>38 <TD>FinishOpacity (0-100):</TD>39 <TD><INPUT TYPE = "text" ID = "opacityButton2" SIZE = "3"40 MAXLENGTH = "3" VALUE = "0"></TD>41 </TR>42 43 <TR>44 <TD>Style:</TD>45 <TD><SELECT ID = "styleSelect">46 <OPTION VALUE = "1">Linear47 <OPTION VALUE = "2" SELECTED>Circular48 <OPTION VALUE = "3">Rectangular49 </SELECT></TD>50 </TR>51 52 <TR>

Fig. 17.6 Applying the alpha filter (part 1 of 2).

iw3htp_17.fm Page 570 Friday, May 5, 2000 6:08 PM

Page 10: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 571

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

53 <TD ALIGN = "center" COLSPAN = "2"><INPUT TYPE = "button" 54 VALUE = "Apply" ONCLICK = "run()"></TD>55 </TR>56 </TABLE>5758 </BODY>59 </HTML>

Fig. 17.6 Applying the alpha filter (part 2 of 2).

iw3htp_17.fm Page 571 Friday, May 5, 2000 6:08 PM

Page 11: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

572 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.7: glow.html -->5 <!-- Applying the glow filter -->67 <HEAD>8 <TITLE>Glow Filter</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">

10 var strengthIndex = 1;11 var counter = 1;12 var upDown = true;13 var colorArray = [ "FF0000", "FFFF00", "00FF00", 14 "00FFFF", "0000FF", "FF00FF" ];15 function apply() 16 {17 glowSpan.filters( "glow" ).color = 18 parseInt( glowColor.value, 16);19 glowSpan.filters( "glow" ).strength = 20 glowStrength.value;21 }2223 function startdemo() 24 {25 window.setInterval( "rundemo()", 150 );26 }2728 function rundemo()29 {30 if ( upDown )31 glowSpan.filters( "glow" ).strength = strengthIndex++;32 else33 glowSpan.filters( "glow" ).strength = strengthIndex--;34 35 if ( strengthIndex == 1 ) { 36 upDown = !upDown;37 counter++;38 glowSpan.filters( "glow" ).color =39 parseInt( colorArray[ counter % 6 ], 16 );40 }41 42 if ( strengthIndex == 10 ) {43 upDown = !upDown;44 }45 }46 </SCRIPT>47 </HEAD>4849 <BODY STYLE = "background-color: #00AAAA">50 <H1>Glow Filter:</H1> 51

Fig. 17.7 Applying changes to the glow filter (part 1 of 2).

iw3htp_17.fm Page 572 Friday, May 5, 2000 6:08 PM

Page 12: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 573

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

52 <SPAN ID = "glowSpan" STYLE = "position: absolute; left: 200; 53 top: 100; padding: 5; filter: glow( color = red, 54 strength = 5 )">55 <H2>Glowing Text</H2>56 </SPAN>5758 <TABLE BORDER = 1 STYLE = "background-color: #CCFFCC">59 <TR>60 <TD>Color (Hex)</TD>61 <TD><INPUT ID = "glowColor" TYPE = "text" SIZE = 6 62 MAXLENGTH = 6 VALUE = FF0000></TD>63 </TR>64 <TR>65 <TD>Strength (1-255)</TD>66 <TD><INPUT ID = "glowStrength" 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>7778 </BODY>79 </HTML>

Fig. 17.7 Applying changes to the glow filter (part 2 of 2).

iw3htp_17.fm Page 573 Friday, May 5, 2000 6:08 PM

Page 13: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

574 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.8: blur.html -->5 <!-- The blur filter -->67 <HEAD>8 <TITLE>Blur Filter</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">

10 var strengthIndex = 1;11 var blurDirection = 0;12 var upDown = 0;13 var timer;1415 function reBlur() 16 {17 blurImage.filters( "blur" ).direction =18 document.forms( "myForm" ).Direction.value;19 blurImage.filters( "blur" ).strength =20 document.forms( "myForm" ).Strength.value;21 blurImage.filters( "blur" ).add =22 document.forms( "myForm" ).Add.checked;23 }2425 function startDemo() 26 {27 timer = window.setInterval( "runDemo()", 5 );28 }2930 function runDemo( ) 31 {32 document.forms( "myForm" ).Strength.value = strengthIndex;33 document.forms( "myForm" ).Direction.value = 34 ( blurDirection % 360 );3536 if( strengthIndex == 35 || strengthIndex == 0 )37 upDown = !upDown;3839 blurImage.filters( "blur" ).strength = 40 ( upDown ? strengthIndex++ : strengthIndex-- );4142 if ( strengthIndex == 0 ) 43 blurImage.filters( "blur" ).direction = 44 ( ( blurDirection += 45 ) % 360 );45 }4647 </SCRIPT>48 </HEAD>4950 <BODY>51 <FORM NAME = "myForm">

Fig. 17.8 Using the blur filter with the add property false then true (part 1 of 3).

iw3htp_17.fm Page 574 Friday, May 5, 2000 6:08 PM

Page 14: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 575

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

5253 <TABLE BORDER = "1" STYLE = "background-color: #CCFFCC">54 <CAPTION>Blur filter controls</CAPTION>5556 <TR>57 <TD>Direction:</TD>58 <TD><SELECT NAME = "Direction">59 <OPTION VALUE = "0">above60 <OPTION VALUE = "45">above-right61 <OPTION VALUE = "90">right62 <OPTION VALUE = "135">below-right63 <OPTION VALUE = "180">below64 <OPTION VALUE = "225">below-left65 <OPTION VALUE = "270">left66 <OPTION VALUE = "315">above-left67 </SELECT></TD>68 </TR>6970 <TR>71 <TD>Strength:</TD>72 <TD><INPUT NAME = "Strength" SIZE = "3" MAXLENGTH = "3" 73 VALUE = "0"></TD>74 </TR>7576 <TR>77 <TD>Add original?</TD>78 <TD><INPUT TYPE = "checkbox" NAME = "Add"></TD>79 </TR>8081 <TR>82 <TD ALIGN = "center" COLSPAN = "2"><INPUT TYPE = "button"83 VALUE = "Apply" ONCLICK = "reBlur();"></TD>84 </TR>8586 <TR>87 <TD COLSPAN = "2">88 <INPUT TYPE = "button" VALUE = "Start demo" 89 ONCLICK = "startDemo();"> 90 <INPUT TYPE = "button" VALUE = "Stop demo" 91 ONCLICK = "window.clearInterval( timer );"></TD>92 </TR>9394 </TABLE>95 </FORM>9697 <DIV ID = "blurImage" 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>103104 </BODY>105 </HTML>

Fig. 17.8 Using the blur filter with the add property false then true (part 2 of 3).

iw3htp_17.fm Page 575 Friday, May 5, 2000 6:08 PM

Page 15: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

576 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.8 Using the blur filter with the add property false then true (part 3 of 3).

iw3htp_17.fm Page 576 Friday, May 5, 2000 6:08 PM

Page 16: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 577

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.9: wave.html -->5 <!-- Applying the wave filter -->67 <HEAD>8 <TITLE>Wave Filter</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 var wavePhase = 0;1213 function start() 14 {15 window.setInterval( "wave()", 5 );16 }1718 function wave()19 {20 wavePhase++;21 flag.filters( "wave" ).phase = wavePhase;22 }23 </SCRIPT>24 </HEAD>2526 <BODY ONLOAD = "start();">2728 <SPAN ID = "flag" 29 STYLE = "align: center; position: absolute; 30 left: 30; padding: 15;31 filter: wave(add = 0, freq = 1, phase = 0, strength = 10)">32 <H1>Here's some waaaavy text</H1>33 </SPAN>3435 </BODY>36 </HTML>

Fig. 17.9 Adding a wave filter to text (part 1 of 2).

iw3htp_17.fm Page 577 Friday, May 5, 2000 6:08 PM

Page 17: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

578 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.9 Adding a wave filter to text (part 2 of 2).

iw3htp_17.fm Page 578 Friday, May 5, 2000 6:08 PM

Page 18: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 579

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.10: dropshadow.html -->5 <!-- Using the light filter with the dropshadow filter -->67 <HEAD>8 <TITLE>DHTML dropShadow and light Filters</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 function setlight( ) 12 {13 dsImg.filters( "light" ).addPoint( 150, 150,14 125, 255, 255, 255, 100);15 }1617 function run() 18 {19 eX = event.offsetX;20 eY = event.offsetY;2122 xCoordinate = Math.round( eX-event.srcElement.width/2, 0 );23 yCoordinate = Math.round( eY-event.srcElement.height/2, 0 );2425 dsImg.filters( "dropShadow" ).offx = xCoordinate / -3;26 dsImg.filters( "dropShadow" ).offy = yCoordinate / -3;2728 dsImg.filters( "light" ).moveLight(0, eX, eY, 125, 1);29 }30 </SCRIPT>31 </HEAD>3233 <BODY ONLOAD = "setlight()" STYLE = "background-color: green">3435 <IMG ID = "dsImg" SRC = "circle.gif" 36 STYLE = "top: 100; left: 100; filter: dropShadow( offx = 0,37 offy = 0, color = black ) light()" ONMOUSEMOVE = "run()">3839 </BODY>40 </HTML>

Fig. 17.10 Applying light filter with a dropshadow (part 1 of 2).

iw3htp_17.fm Page 579 Friday, May 5, 2000 6:08 PM

Page 19: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

580 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.10 Applying light filter with a dropshadow (part 2 of 2).

iw3htp_17.fm Page 580 Friday, May 5, 2000 6:08 PM

Page 20: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 581

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.11: conelight.html -->5 <!-- Automating the cone light source -->67 <HEAD><TITLE>Cone lighting</TITLE>89 <SCRIPT LANGUAGE = "JavaScript">

10 var upDown = true;11 var counter = 0;12 var moveRate = -2;1314 function setLight() 15 {16 marquee.filters( "light" ).addCone( 0, marquee.height, 8,17 marquee.width/2, 30, 255, 150, 255, 50, 15 );18 marquee.filters( "light" ).addCone( marquee.width, 19 marquee.height, 8, 200, 30, 150, 255, 255, 50, 15 );20 marquee.filters( "light" ).addCone( marquee.width/2, 21 marquee.height, 4, 200, 100, 255, 255, 150, 50, 50 );2223 window.setInterval( "moveLight()", 100 );24 }25 26 function moveLight()27 {28 counter++;2930 if ( ( counter % 30 ) == 0 )31 upDown = !upDown; 32 33 if ( ( counter % 10 ) == 0 )34 moveRate *= -1;35 36 if ( upDown ) {37 marquee.filters( "light" ).moveLight( 0,-1,-1,3,0 );38 marquee.filters( "light" ).moveLight( 1,1,-1,3,0 );39 marquee.filters( "light" ).moveLight(2,moveRate,0,3,0);40 }41 else {42 marquee.filters( "light" ).moveLight( 0,1,1,3,0 );43 marquee.filters( "light" ).moveLight( 1,-1,1,3,0 );44 marquee.filters( "light" ).moveLight(2,moveRate,0,3,0);45 }46 }47 </SCRIPT>4849 <BODY STYLE = "background-color: #000000" ONLOAD = "setLight()">5051 <IMG ID = "marquee" SRC = "marquee.gif" 52 STYLE = "filter: light; position: absolute; left: 100;

Fig. 17.11 Dynamic cone source lighting (part 1 of 2).

iw3htp_17.fm Page 581 Friday, May 5, 2000 6:08 PM

Page 21: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

582 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

53 top: 100">5455 </BODY>56 </HTML>

Fig. 17.11 Dynamic cone source lighting (part 2 of 2).

iw3htp_17.fm Page 582 Friday, May 5, 2000 6:08 PM

Page 22: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 583

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.12: blendtrans.html -->5 <!-- Blend transition -->67 <HEAD>8 <TITLE>Using blendTrans</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 function blendOut() 12 {13 textInput.filters( "blendTrans" ).apply();14 textInput.style.visibility = "hidden";15 textInput.filters( "blendTrans" ).play();16 }17 </SCRIPT>18 </HEAD>1920 <BODY>2122 <DIV ID = "textInput" ONCLICK = "blendOut()" 23 STYLE = "width: 300; filter: blendTrans( duration = 3 )">24 <H1>Some fading text</H1>25 </DIV>2627 </BODY>28 </HTML>

Fig. 17.12 Using the blendTrans transition .

iw3htp_17.fm Page 583 Friday, May 5, 2000 6:08 PM

Page 23: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

584 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.13: blendtrans2.html -->5 <!-- Blend Transition -->67 <HEAD>8 <TITLE>Blend Transition II</TITLE>9

10 <SCRIPT LANGUAGE = "JavaScript">11 var whichImage = true;1213 function blend() 14 {15 if ( whichImage ) {16 image1.filters( "blendTrans" ).apply();17 image1.style.visibility = "hidden";18 image1.filters( "blendTrans" ).play();19 }20 else {21 image2.filters( "blendTrans" ).apply();22 image2.style.visibility = "hidden";23 image2.filters( "blendTrans" ).play();24 } 25 }2627 function reBlend ( fromImage ) 28 {29 if ( fromImage ) {30 image1.style.zIndex -= 2;31 image1.style.visibility = "visible";32 }33 else {34 image1.style.zIndex += 2;35 image2.style.visibility = "visible";36 }37 38 whichImage = !whichImage;39 blend();40 }41 </SCRIPT>42 </HEAD>4344 <BODY STYLE = "color: darkblue; background-color: lightblue" 45 ONLOAD = "blend()">4647 <H1>Blend Transition Demo</H1>4849 <IMG ID = "image2" SRC = "cool12.jpg" 50 ONFILTERCHANGE = "reBlend( false )" 51 STYLE = "position: absolute; left: 50; top: 50; width: 300;52 filter: blendTrans( duration = 4 ); z-index: 1">

Fig. 17.13 Blending between images with blendTrans (part 1 of 2).

iw3htp_17.fm Page 584 Friday, May 5, 2000 6:08 PM

Page 24: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 585

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

5354 <IMG ID = "image1" SRC = "cool8.jpg" 55 ONFILTERCHANGE = "reBlend( true )" 56 STYLE = "position: absolute; left: 50; top: 50; width: 300;57 filter: blendTrans( duration = 4 ); z-index: 2">5859 </BODY>60 </HTML>

Fig. 17.13 Blending between images with blendTrans (part 2 of 2).

iw3htp_17.fm Page 585 Friday, May 5, 2000 6:08 PM

Page 25: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

586 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 <!-- Fig 17.14: revealtrans.html -->5 <!-- Cycling through 24 transitions -->6 <HEAD>7 <TITLE>24 DHTML Transitions</TITLE>89 <SCRIPT>

10 var transitionName = 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"];2324 var counter = 0;25 var whichImage = true;2627 function blend() 28 {29 if ( whichImage ) {30 image1.filters( "revealTrans" ).apply();31 image1.style.visibility = "hidden";32 image1.filters( "revealTrans" ).play();33 }34 else {35 image2.filters( "revealTrans" ).apply();36 image2.style.visibility = "hidden";37 image2.filters( "revealTrans" ).play();38 } 39 }4041 function reBlend( fromImage )42 {43 counter++;4445 if ( fromImage ) {46 image1.style.zIndex -= 2;47 image1.style.visibility = "visible";48 image2.filters("revealTrans").transition = counter % 24;49 }50 else {51 image1.style.zIndex += 2;

Fig. 17.14 Transitions using revealTrans (part 1 of 5).

iw3htp_17.fm Page 586 Friday, May 5, 2000 6:08 PM

Page 26: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 587

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

52 image2.style.visibility = "visible";53 image1.filters("revealTrans").transition = counter % 24;54 }5556 whichImage = !whichImage;57 blend();58 transitionDisplay.innerHTML = "Transition " + counter % 24 +59 ":<BR> " + transitionName[ counter % 24 ];60 }61 </SCRIPT>62 </HEAD>6364 <BODY STYLE = "color: white; background-color: lightcoral" 65 ONLOAD = "blend()">6667 <IMG ID = "image2" SRC = "icontext.gif" 68 STYLE = "position: absolute; left: 10; top: 10; 69 width: 300; z-index:1; visibility: visible;70 filter: revealTrans( duration = 2, transition = 0 )" 71 ONFILTERCHANGE = "reBlend( false )"> 7273 <IMG ID = "image1" SRC = "icons2.gif" 74 STYLE = "position: absolute; left: 10; top: 10; 75 width: 300; z-index:1; visibility: visible;76 filter: revealTrans( duration = 2, transition = 0 )"77 ONFILTERCHANGE = "reBlend( true )">7879 <DIV ID = "transitionDisplay" STYLE = "position: absolute; 80 top: 10; left: 325">Transition 0:<BR> Box In</DIV>8182 </BODY>83 </HTML>

Fig. 17.14 Transitions using revealTrans (part 2 of 5).

iw3htp_17.fm Page 587 Friday, May 5, 2000 6:08 PM

Page 27: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

588 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.14 Transitions using revealTrans (part 3 of 5).

iw3htp_17.fm Page 588 Friday, May 5, 2000 6:08 PM

Page 28: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

Chapter 17 Dynamic HTML: Filters and Transitions 589

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.14 Transitions using revealTrans (part 4 of 5).

iw3htp_17.fm Page 589 Friday, May 5, 2000 6:08 PM

Page 29: flip - University of Macedonia · Chapter 17 Dynamic HTML: Filters and Transitions 575 © Copyright 2000 by Prentice Hall. All Rights Reserved. For use only by instructors in classes

590 Dynamic HTML: Filters and Transitions Chapter 17

© Copyright 2000 by Prentice Hall. All Rights Reserved.For use only by instructors in classes for which Java How to Program, Third Edition is the required textbook.

Fig. 17.14 Transitions using revealTrans (part 5 of 5).

iw3htp_17.fm Page 590 Friday, May 5, 2000 6:08 PM


Recommended