35 The opacity property determines what percentage the
specified gradient starts. The finishopacity property determines
what percentage the specified gradient finishes. The alpha filter
is used to achieve gradient and transparency effects. The style
property of the filter determines what style of opacity should be
applied. 2001 Prentice Hall, Inc. All rights reserved. Outline 14
Alpha.html Opacity (0-100): 38 FinishOpacity (0-100): 44 Style:
Linear Circular 54 Rectangular There are 4 styles of opacity that
can be applied to an image, each represented by a value 0-3:
uniform opacity (0), linear gradient (1), circular gradient (2) and
rectangular gradient (3). 2001 Prentice Hall, Inc. All rights
reserved. Outline 15 Program Output The user selects linear opacity
to apply to the image at a start percentage of 100 and end
percentage of 10. The default image has circular opacity applied at
a start percentage of 100 and an end percentage of 0. 2001 Prentice
Hall, Inc. All rights reserved. Outline 16 Glow.html 1 2 Glow
Filter Glow Filter: 63 Glowing Text Lines 3340 increment or
decrement the strength property of the glow filter based on the
value of upDown. The if structures at lines 42 and 49 toggle
UpDown, when strengthIndex reaches either 1 or 10 Lines 45 46
change the color attribute of the glow filter based on counter. The
parseInt function is used to assign a proper hexadecimal value to
the color property. Add padding to prevent the borders of the
element from cutting off the affects of the glow filer. 2001
Prentice Hall, Inc. All rights reserved. Outline 18 Glow.html Color
(Hex) 69 Strength (1-255) 74 82 Clicking the Run Demo button starts
a cycle that oscillates the filter strength, cycling through the
colors in colorArray after every loop. 2001 Prentice Hall, Inc. All
rights reserved. Outline 19 Program Output The color and strength
selected for the glow filter will be applied to Glowing Text on the
right of the table. 2001 Prentice Hall, Inc. All rights reserved.
Outline 20 Blur.html 1 2 Blur Filter Blur filter controls 59 The
direction property is incremented when the strength of the blur
filter is 0 (i.e., when an iteration has completed). The value
assigned to the direction property cycles through all the multiples
of 45 between 0 and 360. 2001 Prentice Hall, Inc. All rights
reserved. Outline 22 Blur.html Direction: above 64 above-right 65
right 66 below-right 67 below 68 below-left 69 left 70 above-left
Strength: 76 Add original? If the user checks the checkbox, a value
of true is selected, and an image of the original is added to the
blurred image. 2001 Prentice Hall, Inc. All rights reserved.
Outline 23 Blur.html 95
106 Initial values are assigned to the blur filter. 2001
Prentice Hall, Inc. All rights reserved. Outline 24 Program Output
A blurred image without an original copy added on top of it. A
blurred image with an original copy added on top of it. 2001
Prentice Hall, Inc. All rights reserved. Outline 25 Wave.html 1 2
Wave Filter The wave filter allows you to apply sine- wave
distortions to text and images. 2001 Prentice Hall, Inc. All rights
reserved. Outline 26 Wave.html 37 Here is some waaaavy text The
phase property indicates the phase shift of the wave. Increasing
this property only shifts the wave in space. The freq property
determines the frequency of the wave appliedi.e., how many complete
sine waves are applied in the affected area. The strength property
is the amplitude of the sine wave that is applied. The add property
adds a copy of the text or image underneath the filtered effect.
The add property is useful only when applying the wave filter to
images. 2001 Prentice Hall, Inc. All rights reserved. Outline 27
Program Output The phase of the wave filter is incremented every 5
seconds. Outputs reflecting the phase at different intervals is
displayed to the left. 2001 Prentice Hall, Inc. All rights
reserved. Outline 28 Dropshadow.html 1 2 DHTML dropShadow and light
Filters The color property specifies the color of the drop shadow.
The offx and offy properties determine by how many pixels the drop
shadow is offset. The effect of dropshadow is seen in the
background in black. The effect of light is seen in the brighter
portions of the text. 2001 Prentice Hall, Inc. All rights reserved.
Outline 30 Conelight.html 1 2 Cone lighting var upDown = true; 13
var counter = 0; 14 var moveRate = -2; 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 ); window.setInterval( "display()", 100 ); 26 } function
display() 29 { 30 counter++; if ( ( counter % 30 ) == 0 ) 33 upDown
= !upDown; 34 Lines 1819 add our first cone light source, using the
addCone method. 2001 Prentice Hall, Inc. All rights reserved.
Outline 31 Conelight.html 35 if ( ( counter % 10 ) == 0 ) 36
moveRate *= -1; if ( upDown ) { 39 marquee.filters( "light"
).moveLight( 40 0, -1, -1, 3, 0 ); 41 marquee.filters( "light"
).moveLight( 42 1, 1, -1, 3, 0 ); 43 marquee.filters( "light"
).moveLight( 44 2, moveRate, 0, 3, 0); 45 } 46 else { 47
marquee.filters( "light" ).moveLight( 48 0, 1, 1, 3, 0 ); 49
marquee.filters( "light" ).moveLight( 50 1, -1, 1, 3, 0 ); 51
marquee.filters( "light" ).moveLight( 52 2, moveRate, 0, 3, 0) ; 53
} 54 } When used on cone sources, the moveLight method moves the
target of the light. 2001 Prentice Hall, Inc. All rights reserved.
Outline 32 Program Output The two outputs display the light filter
aimed at different sections of the image. 2001 Prentice Hall, Inc.
All rights reserved. Outline 33 Blendtrans.html 1 2 Using
blendTrans
28 Some fading text The blendTrans transition creates a smooth
fade-in/fade-out effect. The apply method initializes the
transition for the affected element. The visibility of the element
is set to hidden this takes effect when we invoke method play in
line 18. The filter to blendTrans and the duration parameter to 3.
This determines how long the transition takes. Transitions are set
as values of the filter CSS property, just as regular filters are.
2001 Prentice Hall, Inc. All rights reserved. Outline 34 Program
Output Text fading using the blendTrans transition. 2001 Prentice
Hall, Inc. All rights reserved. Outline 35 Blendtrans2.html 1 2
Blend Transition II Blend Transition Demo The function then toggles
the whichImage property, and calls function blend so that the whole
process starts again, now transitioning from image2 back to image1.
Two overlapping images are placed on the page, with id s image1 and
image2 (lines 5363). When the transition is complete, image1 s
onfilterchange event (line 60) fires. 2001 Prentice Hall, Inc. All
rights reserved. Outline 37 Program Output Because there are two
images in the same place, when image1 fades out, it appears that
image2 fades in to replace it. 2001 Prentice Hall, Inc. All rights
reserved. Outline 38 Revealtrans.html 1 2 DHTML Transitions
Transition 0: Box In Again two images will be used to
demonstrate the blending and reblending of transitions. 2001
Prentice Hall, Inc. All rights reserved. Outline 41 Program Output
Examples of the possible types of transitions that were displayed
when running the application. 2001 Prentice Hall, Inc. All rights
reserved. Outline 42 Program Output