 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
| Availability: |
| |||
| Object properties: | Enabled, OffX, OffY, Positive , Color | |||
| Supported by objects: | A, ACRONYM, ADDRESS, B, BDO, BIG BLOCKQUOTE, body, BUTTON, CAPTION, CENTER, CITE, CODE, custom, DD, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, Hn, I, IFRAME, IMG, INPUT, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP | |||
This visual filter creates drop shadow effects. These are quite useful for lifting control elements out of the page to make them more readily visible.
The following properties are supported:
The Enabled property was added at version 5.5 of MSIE to implement a consistent way of enabling/disabling filters by means of its true or false setting.
The offx and offy properties define the magnitude and direction of the dropshadow.
The positive property specifies whether all pixels or only visible pixels generate a drop shadow. Setting this value to 0 applies a shadow based on every pixel in the element. A value of 1 only shadows non-transparent pixels.
The Color property provides a way to determine the drop shadow color. This is not available on earlier versions of the MSIE browser.
The example shows the effect of adding a drop shadow to an image. In this example, you will see that the shadow has a hard edge created by a point source of light - you may want to use the Blur filter to provide a more natural effect with soft edges.
Filters are defined in style sheets as if they were a function call with its arguments expressed as name=value pairs. This is not the typical way to define arguments so you should be aware of this anomaly when working with filters.
<HTML> <HEAD> </HEAD> <BODY> Normal--> <IMG ID="NORMAL" SRC="./Logo150.gif"> Filtered--> <IMG ID="MYIMAGE" SRC="./Logo150.gif"> <BR> <SCRIPT> myFilter = "progid:DXImageTransform.Microsoft.DropShadow(offx=10, offy=10, positive=1, color=gray)"; document.all.MYIMAGE.style.filter = myFilter; </SCRIPT> </BODY> </HTML>
| See also: | color value, Filter object, style.filter |
| Property | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Enabled |  | 3.0  | | 4.0 | | | | | | | - |
| OffX | | 3.0 | | 4.0 | | | | | | |  |
| OffY | | 3.0 | | 4.0 | | | | | | | |
| Positive | | 3.0 | | 4.0 | | | | | | | |
| Color | | 3.0 | | 4.0 | | | | | | | |
| Prev | Home | Next |
| filter - Compositor() | Up | filter - Emboss() |
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions. | ||