 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
| Availability: |
| |||
| Object properties: | Enabled, SizingMethod, Src | |||
| 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 | |||
If you consider the content of the object and its background as two layers that are composited together, this filter interposes an additional image layer between them.
This layer can have its transparency adjusted as well as scaling and clipping to position the image where you want it.
The Enabled property can be set true to switch on the effect of this filter or false to deactivate it.
The SizingMethod property can be set to one of the following values:
The crop value forces the image to be cropped to fit the HTML Element content's extent rectangle.
The image value forces the HTML Element to be resized to accommodate the extent rectangle of the image file.
The scale value forces the image to be scaled to fit the current extent rectangle for the HTML Element.
The Src property is mandatory and needs to point at a valid and absolute image URL value that can be loaded.
The example demonstrates these capabilities by cycling round all three settings using a switch case selector.
<HTML><HEAD></HEAD>
<BODY>
<SCRIPT>
var theState = 0;
// Cycle the sizingMethod property to size the image.
function changeState(oObj)
{
switch(theState)
{
case 0:
theState = 1;
CONTAINER.filters(0).sizingMethod = "image";
oObj.innerText = 'Scale to fit';
break;
case 1:
theState = 2;
CONTAINER.filters(0).sizingMethod = "scale";
oObj.innerText = 'Crop to fit';
break;
case 2:
theState = 0;
CONTAINER.filters(0).sizingMethod = "crop";
oObj.innerText = 'Normal';
break;
}
}
</SCRIPT>
<DIV ID="CONTAINER" STYLE="position:absolute; left:140px; height:50; width:50; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='C:\FilterTests\Logo150.gif', sizingMethod='scale');" >
</DIV>
<BUTTON onclick="changeState(this);">Scale to fit</BUTTON>
</BODY>
</HTML>| See also: | Filter object, Procedural surfaces, style.filter |
| Property | JavaScript | JScript | N | IE | Opera | NES | ECMA | DOM | CSS | HTML | Notes |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Enabled |  | 5.5  | | 4.0 | | | | | | | - |
| SizingMethod | | 5.5 | | 5.5 | | | | | | | - |
| Src | | 5.5 | | 5.5 | | | | | | | - |
| Prev | Home | Next |
| filter - Alpha() | Up | filter - Barn() |
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. | ||