Scribd
Upload
8 views14 pages

5filters&transition New

Uploaded by

gunasundar choppa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
8 views14 pages

5filters&transition New

Uploaded by

gunasundar choppa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 14

Dynamic HTML: Filters and

Transitions

 2001 Prentice Hall, Inc. All rights reserved.


1 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 15.1: flip.html --> Flip.html
6 <!-- Using the flip filters -->
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; Line 32 applies a filter using the style attribute.
22 padding: 1ex }
23 </style>
24 </head>
25
26 <body> The filter applied is fliph, which
27
28 <table>
flips the affected object horizontally.
29
30 <tr>
31 <!-- Filters are applied in style declarations -->
32 <td style = "filter: fliph">Text</td>
33 <td>Text</td>
34 </tr>
35
 2001 Prentice Hall, Inc.
All rights reserved.
36 <tr> Outline
37 <!-- More than one filter can be applied at once -->
38 <td style = "filter: flipv fliph">Text</td>
39 <td style = "filter: flipv">Text</td>
40 </tr> Flip.html
41
42 </table> Line 38 applies multiple filters separated by
43 spaces as values of the filter attribute.
44 </body>
45 </html>
In this case, the flipv filter is also applied, which
vertically flips the object to which the filter is applied.

Program Output

fliph filte r a p p lie d No filte rs a p p lie d

Bo th fliph a n d flipv  2001 Prentice Hall, Inc.


flipv filte r a p p lie d All rights reserved.
filte rs a p p lie d
1 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig 15.2: chroma.html --> Chroma.html
6 <!-- Applying transparency using the chroma filter -->
7 The chroma filter applies transparency
8 <html xmlns = "http://www.w3.org/1999/xhtml"> effects dynamically into the image.
9 <head>
10 <title>Chroma Filter</title>
11 Lines 19 sets the filter properties
12 <script type = "text/javascript">
13 <!-- dynamically. This is the color value from
14 function changecolor( theColor ) the select drop-down list (lines 41–48)
15 { passed in as an argument to the function.
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 }
26 // --> Line 20 turns on the filter by setting its
27 </script> enabled property to true.
28 </head>
29
30 <body>
31 If None (line 43) is selected from the
32 <h1>Chroma Filter:</h1> drop-down list, the filter is disabled.
33
 2001 Prentice Hall, Inc.
All rights reserved.
34 <img id = "chromaImg" src = "trans.gif" style = Outline
35 "position: absolute; filter: chroma" alt =
36 "Transparent Image" />
37
38 <form action = ""> Chroma.html
39 <!-- The onchange event fires when -->
40 <!-- a selection is changed -->
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>
The onchange event fires whenever the value of
48 </select>
49 </form> a form field changes. In this example, an onchange
50 event occurs when the user makes a new selection in
51 </body>
the colorSelect drop-down list.
52 </html>

Program Output

The user decides to apply the


chroma filter to the color yellow.

 2001 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <!-- Fig 15.3: mask.html --> Mask.html
6 <!-- Placing a mask over an image -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Mask Filter</title>
11 </head>
12
13 <body>
14
The mask filter is applied to an h1
15 <h1>Mask Filter</h1> element which overlaps an image.
16
17 <!-- Filter parameters are specified in parentheses, -->
18 <!-- in the form param1 = value1, param2 = value2, -->
19 <!-- etc. -->
20 <div style = "position: absolute; top: 125; left: 20;
21 filter: mask( color = #CCFFFF )">
22 <h1 style = "font-family: Courier, monospace">
23 AaBbCcDdEeFfGgHhIiJj<br /> Line 21 sets the color parameter
24 KkLlMmNnOoPpQqRrSsTt for the mask filter.
25 </h1>
26 </div>
27
28 <img src = "gradient.gif" width = "400" height = "200"
29 alt = "Image with Gradient Effect" />
30 </body>
31 </html>
Applying the mask will make the foreground of that h1
element (the text inside it) transparent, so you can see the
background image through the letters in the foreground.  2001 Prentice Hall, Inc.
All rights reserved.
Outline

Program Output

Applying the mask filter to an image allows


you to create an image mask, in which the
background of an element is a solid color
and the foreground of an element is
transparent to the image or color behind it.

 2001 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 15.4: misc.html --> Misc.html
6 <!-- Image filters to invert, grayscale or xray an image -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
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> The gray filter applies a grayscale image
17 </head> effect, in which all color is stripped from the
18
19 <body>
image and all that remains is brightness data.
20 <table class = "cap">
21 <tr>
22 <td>Normal</td>
23 <td>Grayscale</td>
24 </tr>
25 <tr>
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>
 2001 Prentice Hall, Inc.
All rights reserved.
36 <tr> Outline
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" Misc.html
41 alt = "inverted scenic view"/>
42 </td>
43 </tr>
44 </table>
45
46 </body>
47 </html>

The invert filter applies a negative The xray filter applies an x-ray effect,
image effect—dark areas become light which basically is an inversion of the
and light areas become dark. grayscale effect.

 2001 Prentice Hall, Inc.


All rights reserved.
Outline

Program Output

This is a display of the effects of


the three different types of filters
on the image at the top left corner.

 2001 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 15.5: shadow.html --> Shadow.html
6 <!-- Applying the shadow filter -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Shadow Filter</title>
11
12 <script type = "text/javascript"> Function runDemo, cycles through the direction
13 <!-- property values, from 0 to 315, and update property
14 var shadowDirection = 0;
innerText of the h1 element (shadowText) to
15
16 function start() match the current shadow direction.
17 {
18 window.setInterval( "runDemo()", 500 );
19 }
20
21 function runDemo()
22 {
23 shadowText.innerText =
24 "Shadow Direction: " + shadowDirection % 360;
25 shadowText.filters( "shadow" ).direction =
26 ( shadowDirection % 360 );
27 shadowDirection += 45;
28 }
29 // -->
30 </script>
Property direction of the shadow filter determines in
31 </head> which direction the shadow effect is applied.
32

 2001 Prentice Hall, Inc.


All rights reserved.
33 <body onload = "start()"> Outline
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>
Shadow.html
38 </body>
39 </html>

The padding CSS style is applied to the h1


Property color specifies the color of element. Otherwise, the shadow effect is partially
the shadow that is applied to the text. cut off by the border of the element.

Program Output

 2001 Prentice Hall, Inc.


All rights reserved.
1 <?xml version = "1.0"?> Outline
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig 15.12: blendtrans.html --> Blendtrans.html
6 <!-- Blend transition -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml"> The blendTrans transition creates a
9 <head> smooth fade-in/fade-out effect.
10 <title>Using blendTrans</title>
11
12 <script type = "text/javascript">
13 <!-- The apply method initializes the
14 function blendOut()
15 { transition for the affected element.
16 textInput.filters( "blendTrans" ).apply();
17 textInput.style.visibility = "hidden";
18 textInput.filters( "blendTrans" ).play();
19 }
20 // --> The visibility of the element is set
21 </script> to hidden—this takes effect when we
22 </head>
23 invoke method play in line 18.
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> The filter to blendTrans and the
30 duration parameter to 3. This
31 </body> determines how long the transition takes.
32 </html>
Transitions are set as values of the filter
CSS property, just as regular filters are.  2001 Prentice Hall, Inc.
All rights reserved.
Outline

Program Output

Text fading using the blendTrans transition.

 2001 Prentice Hall, Inc.


All rights reserved.

You might also like