其位置为:
帮助 -> 目录 -> Web开发
-> HTML and CSS
-> SDK Documentation
-> HTML and DHTML Reference
DHTML参考主要内容为:
1). DHTML Collections
2). DHTML Constants
3). DHTML Events
4). DHTML Methods
5). DHTML Objects
6). DHTML Properties
附有蒙版和动画过渡示例
Filters and Transitions Master Sample
代码如下:
<HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp>
<HEAD>
<TITLE>Filters and Transitions Interactive Demo</TITLE>
<style>
IMG {}{border:2px solid black}
BODY{}{
margin:0;
background:white;
font-family:verdana;
font-size:80%;
}
.bar{}{
background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;
}
.desbar{}{
background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black;
font-size:8pt;
}
.title{}{
font-size:15pt;
color:white;
padding-left:10px;
}
PRE {}{ margin:0}
a:link
{}{
text-decoration:none;
color:white
}
a:visited
{}{
text-decoration:none;
color:white
}
a:active
{}{
text-decoration:none;
color:white
}
a:hover
{}{
text-decoration:none;
color:yellow
}
SELECT {}{ font-size:9pt; border:2px; }
</style>
<SCRIPT LANGUAGE="javascript">
var browserCapable = true; // Prevents errors on downlevel browsers
var startImage = "fruit.gif"; // /workshop/graphics/
var endImage = "mouse.gif";
var featuresHeader = "<B>Features:</B><BR>"
var sSinQut ="'";
var sRandomBarsOrientationText="";
function copy2Clipboard()
{
// Copy displayed code to user's clipboard.
var textRange = document.body.createTextRange();
textRange.moveToElementText(oCodeSpan);
textRange.execCommand("Copy");
}
function highlightText(whatToHighlight) {
var oRng = document.body.createTextRange();
oRng.moveToElementText(oCodePre);
oRng.execCommand("RemoveFormat");
var oHL = document.body.createTextRange();
oHL.moveToElementText(oCodePre);
oHL.findText(whatToHighlight);
oHL.execCommand("Bold");
}
function switchContent(obj) {
oContentHolder.innerHTML=obj.innerHTML;
oImg.src=startImage;
if (obj==filterSection){
changeFilter();
updateFilterCode();
}
else {
imgObjText.innerHTML = "<BR><b>First Page</b><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes.";
changeTrans();
updateTransCode();
}
}
function getControlObject(controlName) {
var obj=null;
for (x=0; x < document.all(controlName).length; x++) {
objTemp = document.all(controlName,x);
if (objTemp.parentElement.isSource==null) {
obj=objTemp;
}
}
return(obj);
}
function disableControlObject(controlName) {
for (x=0; x < document.all(controlName).length; x++) {
document.all(controlName,x).disabled=true;
}
}
function enableControlObject(controlName) {
for (x=0; x < document.all(controlName).length; x++) {
document.all(controlName,x).disabled=false;
}
}
function changeFilter() {
var selectObject = getControlObject("oSelect");
var selectedValue = selectObject.options[selectObject.selectedIndex].value;
var transitionAsFilter = selectObject.options[selectObject.selectedIndex].TRANS;
imgObjText.innerHTML = "<BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.";
imgObj.style.backgroundColor='skyblue';
imgObj.style.color='darkred';
if (selectedValue != "empty") {
if (selectedValue.indexOf('AlphaImageLoader')!=-1) {
oControlsSpan.innerHTML = oAlphaImageLoaderControls.innerHTML;
alphaImageLoaderFilterChange();
}
else if (selectedValue.indexOf('Alpha')!=-1) {
oControlsSpan.innerHTML = oAlphaControls.innerHTML;
alphaFilterChange();
}
else if (selectedValue.indexOf('Emboss')!=-1) {
oControlsSpan.innerHTML = "";
embossFilterChange();
}
else if (selectedValue.indexOf('Engrave')!=-1) {
oControlsSpan.innerHTML = "";
engraveFilterChange();
}
else if (selectedValue.indexOf('Pixelate')!=-1) {
oControlsSpan.innerHTML = oPixelateFilterControls.innerHTML;
pixelateFilterChange();
}
else if (selectedValue.indexOf('DropShadow')!=-1) {
imgObj.style.backgroundColor='';
imgObjText.innerHTML = "<BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.";
oControlsSpan.innerHTML = oDropShadowControls.innerHTML;
dropShadowFilterChange();
}
else if (selectedValue.indexOf('Chroma')!=-1) {
oControlsSpan.innerHTML = oChromaControls.innerHTML;
chromaFilterChange();
}
else if (selectedValue.indexOf('BasicImage')!=-1) {
oControlsSpan.innerHTML = oBasicImageControls.innerHTML;
basicImageFilterChange();
}
else if (selectedValue.indexOf('Gradient')!=-1) {
oControlsSpan.innerHTML = oGradientControls.innerHTML;
gradientFilterChange();
}
else if (selectedValue.indexOf('Glow')!=-1) {
oControlsSpan.innerHTML = oGlowControls.innerHTML;
glowFilterChange();
}
else if (selectedValue.indexOf('MotionBlur')!=-1) {
oControlsSpan.innerHTML = oMotionBlurControls.innerHTML;
motionBlurFilterChange();
}
else if (selectedValue.indexOf('Shadow')!=-1) {
oControlsSpan.innerHTML = oShadowControls.innerHTML;
shadowFilterChange();
}
else if (selectedValue.indexOf('Wave')!=-1) {
oControlsSpan.innerHTML = oWaveControls.innerHTML;
waveFilterChange();
}
else if (selectedValue.indexOf('Blur')!=-1) {
imgObj.style.backgroundColor='';
imgObjText.innerHTML = "<BR>The image, dark red text, and sky blue background make up the content of the filtered SPAN.";
oControlsSpan.innerHTML = oBlurControls.innerHTML;
blurFilterChange();
}
else {
imgObj.style.filter=selectedValue;
oControlsSpan.innerHTML = '';
}
if (oControlsSpan.innerHTML!='') {
oControlsSpan.innerHTML = featuresHeader + oControlsSpan.innerHTML;
}
if (transitionAsFilter == "TRUE") {
oControlsSpan.innerHTML = oControlsSpan.innerHTML + oGlobalControls.innerHTML;
progressChange();
}
}
else {
imgObj.style.filter='';
oControlsSpan.innerHTML = featuresHeader + 'No filter is currently selected.';
}
updateFilterCode();
}
function updateFilterCode() {
oCodePre.innerText=imgObj.outerHTML;
}
function waveFilterChange(){
var cmd;
var controlObject = getControlObject("WaveFreqList");
var freq = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("WaveLightStrengthList");
var lightStrength = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("WavePhaseList");
var phase = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("WaveStrengthList");
var strength = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Wave(" ;
cmd = cmd + "freq=" + freq;
cmd = cmd + ",LightStrength=" + lightStrength;
cmd = cmd + ",Phase=" + phase;
cmd = cmd + ",Strength=" + strength;
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function shadowFilterChange(){
var cmd;
var controlObject = getControlObject("ShadowDirectionList");
var direction = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("ShadowColorList");
var color = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("ShadowStrengthList");
var strength = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Shadow(" ;
cmd = cmd + "direction=" + direction;
cmd = cmd + ",color=" + color;
cmd = cmd + ",strength=" + strength;
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function motionBlurFilterChange(){
var cmd;
var controlObject = getControlObject("MotionBlurDirectionList");
var direction = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("MotionBlurStrengthList");
var strength = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.MotionBlur(" ;
cmd = cmd + "direction=" + direction;
cmd = cmd + ",strength=" + strength;
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function glowFilterChange(){
var cmd;
var controlObject = getControlObject("GlowColorList");
var color = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("GlowStrengthList");
var strength = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Glow(" ;
cmd = cmd + "color=" + color;
cmd = cmd + ",strength=" + strength;
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function gradientFilterChange(){
var cmd;
var controlObject = getControlObject("GradientTypeList");
var gradientType = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("StartColorStrList");
var startColorStr = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("EndColorStrList");
var endColorStr = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Gradient(" ;
cmd = cmd + "gradientType=" + gradientType;
cmd = cmd + ",startColorStr=" + startColorStr;
cmd = cmd + ",endColorStr=" + endColorStr;
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function alphaFilterChange(){
var cmd;
var controlObject = getControlObject("styleList");
var style = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("opacityList");
var opacity = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Alpha( " ;
cmd = cmd + "style=" + style + ",opacity=" + opacity ;
if (style!=0){
controlObject = getControlObject("finishOpacityList");
enableControlObject("finishOpacityList");
var finishOpacity = controlObject.options[controlObject.selectedIndex].value;
cmd = cmd + ",finishOpacity=" + finishOpacity ;
if (style==1){
controlObject = getControlObject("startXList");
enableControlObject("startXList");
var startX = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("finishXList");
enableControlObject("finishXList");
var finishX = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("startYList");
enableControlObject("startYList");
var startY = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("finishYList");
enableControlObject("finishYList");
var finishY = controlObject.options[controlObject.selectedIndex].value;
cmd = cmd + ",startX=" + startX + ",finishX=" + finishX ;
cmd = cmd + ",startY=" + startY + ",finishY=" + finishY;
}
else{
disableControlObject("startXList");
disableControlObject("finishXList");
disableControlObject("startYList");
disableControlObject("finishYList");
}
}
else{
disableControlObject("finishOpacityList");
disableControlObject("startXList");
disableControlObject("finishXList");
disableControlObject("startYList");
disableControlObject("finishYList");
}
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function alphaImageLoaderFilterChange(){
var cmd;
var controlObject = getControlObject("srcList");
var src = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("sizingMethodList");
var sizingmethod = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader( " ;
cmd = cmd + "src=" + src + ", sizingmethod=" + sizingmethod + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function basicImageFilterChange(){
var cmd;
var controlObject = getControlObject("rotationList");
var rotation = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("mirrorSwitch");
controlObject.checked==true ? mirror = 1 : mirror = 0
controlObject = getControlObject("invertSwitch");
controlObject.checked==true ? invert = 1 : invert = 0
controlObject = getControlObject("xraySwitch");
controlObject.checked==true ? xray = 1 : xray = 0
controlObject = getControlObject("grayscaleSwitch");
controlObject.checked==true ? grayscale = 1 : grayscale = 0
controlObject = getControlObject("basicImageOpacityList");
var opacity = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.BasicImage( Rotation="+ rotation +",Mirror=" + mirror + ",Invert=" + invert + ",XRay=" + xray + ",Grayscale=" + grayscale + ",Opacity=" + opacity;
cmd = cmd + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function blurFilterChange(){
var controlObject = getControlObject("pixelRadiusList");
var pixelRadius = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("makeShadowSwitch");
var makeShadow = controlObject.checked;
var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Blur( PixelRadius="+ pixelRadius +"," + "MakeShadow=" + makeShadow;
if (makeShadow){
controlObject = getControlObject("shadowOpacityList");
enableControlObject("shadowOpacityList");
var shadowOpacity = controlObject.options[controlObject.selectedIndex].value;
cmd = cmd + ",ShadowOpacity=" + shadowOpacity +")'";
}
else{
disableControlObject("shadowOpacityList");
cmd = cmd +")'";
}
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function embossFilterChange(){
// var controlObject = getControlObject("biasList");
// var bias = controlObject.options[controlObject.selectedIndex].value;
var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Emboss()'"; // Bias=" + bias + "
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function engraveFilterChange(){
// var controlObject = getControlObject("biasList");
// var bias = controlObject.options[controlObject.selectedIndex].value;
var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Engrave( )'"; // Bias=" + bias + "
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function pixelateFilterChange(){
var controlObject = getControlObject("maxSquareFList");
var maxSquare = controlObject.options[controlObject.selectedIndex].value;
var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Pixelate( maxsquare="+ maxSquare +")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function dropShadowFilterChange(){
var controlObject = getControlObject("shadowColorList");
var shadowColor = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("offsetXList");
var offX = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("offsetYList");
var offY = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("positiveSwitch");
var positive = controlObject.checked;
var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.dropShadow( Color=" + shadowColor + ",offX=" + offX + ",offY=" + offY + ",positive=" + positive + ")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function chromaFilterChange(){
var controlObject = getControlObject("chromaColorList");
var chromaColor = controlObject.options[controlObject.selectedIndex].value;
var cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Chroma( Color="+ chromaColor +")'";
eval(cmd);
updateFilterCode();
highlightText(cmd);
}
function transStart(arg) {
var obj = getControlObject("oSelect");
var selectedValue=obj.options[obj.selectedIndex].value;
if (selectedValue != "empty") {
imgObj.filters[0].apply();
if (arg.src.indexOf(startImage)!=-1) {
arg.src = endImage;
imgObj.style.backgroundColor = "gold";
imgObjText.innerHTML = "<BR><B>Second Page</B><BR><BR>Using the <B>play</B> method reveals the changes in the SPAN element content.";
}
else {
arg.src = startImage;
imgObj.style.backgroundColor = "skyblue";
imgObjText.innerHTML = "<BR><b>First Page</b><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes.";
}
imgObj.filters[0].play();
}
}
function changeTrans() {
var obj = getControlObject("oSelect");
var selectedValue = obj.options[obj.selectedIndex].value;
sRandomBarsOrientation="";
if (selectedValue != "empty") {
if (selectedValue.indexOf('Barn')!=-1) {
oControlsSpan.innerHTML = oBarnControls.innerHTML;
barnTransChange();
}
else if (selectedValue.indexOf('Blinds')!=-1) {
oControlsSpan.innerHTML = oBlindsControls.innerHTML;
blindsTransChange();
}
else if (selectedValue.indexOf('Checkerboard')!=-1) {
oControlsSpan.innerHTML = oCheckerboardControls.innerHTML;
checkerboardTransChange();
}
else if (selectedValue.indexOf('Fade')!=-1) {
oControlsSpan.innerHTML = oFadeControls.innerHTML;
fadeTransChange();
}
else if (selectedValue.indexOf('Iris')!=-1) {
oControlsSpan.innerHTML = oIrisControls.innerHTML;
irisTransChange();
}
else if (selectedValue.indexOf('Pixelate')!=-1) {
oControlsSpan.innerHTML = oPixelateTransControls.innerHTML;
pixelateTransChange();
}
else if (selectedValue.indexOf('RadialWipe')!=-1) {
oControlsSpan.innerHTML = oRadialWipeControls.innerHTML;
radialWipeTransChange();
}
else if (selectedValue.indexOf('RandomBars')!=-1) {
oControlsSpan.innerHTML = oRandomBarsControls.innerHTML;
randomBarsTransChange();
}
else if (selectedValue.indexOf('RandomDissolve')!=-1) {
oControlsSpan.innerHTML = oRandomDissolveControls.innerHTML;
randomDissolveTransChange();
}
else if (selectedValue.indexOf('Slide')!=-1) {
oControlsSpan.innerHTML = oSlideControls.innerHTML;
slideTransChange();
}
else if (selectedValue.indexOf('Spiral')!=-1) {
oControlsSpan.innerHTML = oSpiralControls.innerHTML;
spiralTransChange();
}
else if (selectedValue.indexOf('Stretch')!=-1) {
oControlsSpan.innerHTML = oStretchControls.innerHTML;
stretchTransChange();
}
else if (selectedValue.indexOf('Strips')!=-1) {
oControlsSpan.innerHTML = oStripsControls.innerHTML;
stripsTransChange();
}
else if (selectedValue.indexOf('Wheel')!=-1) {
oControlsSpan.innerHTML = oWheelControls.innerHTML;
wheelTransChange();
}
else if (selectedValue.indexOf('GradientWipe')!=-1) {
oControlsSpan.innerHTML = oWipeControls.innerHTML;
wipeTransChange();
}
else if (selectedValue.indexOf('Zigzag')!=-1) {
oControlsSpan.innerHTML = oZigzagControls.innerHTML;
zigzagTransChange();
}
else {
imgObj.style.filter=selectedValue;
oControlsSpan.innerHTML = featuresHeader + 'The transition does not support additional features.';
}
}
else {
imgObj.style.filter=null;
oControlsSpan.innerHTML = featuresHeader + 'No transition is currently selected.';
}
updateTransCode();
}
function updateTransCode() {
var obj = getControlObject("oSelect");
var selectedValue=obj.options[obj.selectedIndex].value;
var imgContents = imgObj.outerHTML;
if (selectedValue != "empty") {
oCodePre.innerText=completeTransCode(imgContents);
}
else {
oCodePre.innerText=imgContents;
}
highlightText(imgContents);
}
function completeTransCode(imgText) {
scriptBlock = '';
scriptBlock = scriptBlock + 'var startImage ="' + startImage + '";\n';
scriptBlock = scriptBlock + 'var endImage="' + endImage + '";\n';
scriptBlock = scriptBlock + 'function doTrans() {\n';
scriptBlock = scriptBlock + ' ' + sRandomBarsOrientationText + '\n';
scriptBlock = scriptBlock + ' imgObj.filters[0].apply();\n';
scriptBlock = scriptBlock + ' if (oImg.src.indexOf(startImage)!=-1) {\n';
scriptBlock = scriptBlock + ' oImg.src = endImage;\n';
scriptBlock = scriptBlock + ' imgObj.style.backgroundColor = "gold";\n';
scriptBlock = scriptBlock + ' imgObjText.innerHTML = ';
scriptBlock = scriptBlock + ' "<BR><B>Second Page</B><BR><BR>Using the <B>play</B> method reveals the changes in the SPAN element content."';
scriptBlock = scriptBlock + ' }\n';
scriptBlock = scriptBlock + ' else {\n';
scriptBlock = scriptBlock + ' oImg.src = startImage;\n';
scriptBlock = scriptBlock + ' imgObj.style.backgroundColor = "skyblue";\n';
scriptBlock = scriptBlock + ' imgObjText.innerHTML = ';
scriptBlock = scriptBlock + ' "<BR><b>First Page</b><BR><BR>Using the <B>apply</B> method prepares this SPAN element for content changes."';
scriptBlock = scriptBlock + ' }\n';
scriptBlock = scriptBlock + ' imgObj.filters[0].play();\n';
scriptBlock = scriptBlock + '}\n'
buttonBlock = '\<BR\>\<BR\>\n<BUTTON onclick="doTrans()">Play Transition</BUTTON>\n'
fullBlock = '\<HEAD\>\n\<SCRIPT\>\n' + scriptBlock + '\<\/SCRIPT\>\n\<\/HEAD\>\n\<BODY\>\n' + imgText + buttonBlock + '\<\/BODY\>';
return(fullBlock);
}
function barnTransChange(){
var controlObject = getControlObject("barnMotionList");
var motion = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("barnVerticalList");
var orientation = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Barn( motion="+ motion+",orientation="+ orientation+")'";
eval(cmd);
updateTransCode();
}
function blindsTransChange(){
var controlObject = getControlObject("blindsBandsList");
var bands = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("blindsDirectionList");
var direction = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Blinds( Bands="+ bands+",direction="+ direction+")'";
eval(cmd);
updateTransCode();
}
function checkerboardTransChange(){
var controlObject = getControlObject("checkerboardDirectionList");
var direction = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("squaresXList");
var squaresX = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("squaresYList");
var squaresY = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Checkerboard( Direction="+ direction+",SquaresX="+ squaresX+",SquaresY="+ squaresY+")'";
eval(cmd);
updateTransCode();
}
function fadeTransChange(){
var controlObject = getControlObject("fadeOverlapList");
var overlap = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Fade(Overlap=" + overlap +")'";
eval(cmd);
updateTransCode();
}
function irisTransChange(){
var controlObject = getControlObject("irisStyleList");
var irisstyle = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("irisMotionList");
var motion = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Iris(irisstyle="+ irisstyle+",motion=" + motion +")'";
eval(cmd);
updateTransCode();
}
function pixelateTransChange(){
var controlObject = getControlObject("maxSquareTransList");
var maxSquare = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Pixelate(MaxSquare="+ maxSquare+")'";
eval(cmd);
imgObj.filters[0].progress=0;
updateTransCode();
}
function randomBarsTransChange(){
var controlObject = getControlObject("randomBarsVerticalList");
var orientation = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.RandomBars()'";
eval(cmd);
cmd = "imgObj.filters[0].orientation='" + orientation + "';";
eval(cmd);
sRandomBarsOrientationText = cmd;
updateTransCode();
}
function randomDissolveTransChange(){
var controlObject = getControlObject("randomDissolveVerticalList");
var duration = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.RandomDissolve()'";
eval(cmd);
cmd = "imgObj.filters[0].duration='" + duration + "';";
eval(cmd);
sRandomDissolveOrientationText = cmd;
updateTransCode();
}
function radialWipeTransChange(){
controlObject = getControlObject("radialWipeStyleList");
wipestyle = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.RadialWipe(wipestyle="+ wipestyle+")'";
eval(cmd);
updateTransCode();
}
function slideTransChange(){
controlObject = getControlObject("slideStyleList");
slidestyle = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("slideBandsList");
bands = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Slide(slidestyle="+ slidestyle+",Bands=" + bands +")'";
eval(cmd);
updateTransCode();
}
function spiralTransChange(){
controlObject = getControlObject("spiralGridSizeXList");
gridSizeX = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("spiralGridSizeYList");
gridSizeY = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Spiral(GridSizeX="+ gridSizeX+",GridSizeY=" + gridSizeY +")'";
eval(cmd);
updateTransCode();
}
function stretchTransChange(){
controlObject = getControlObject("stretchStyleList");
stretchstyle = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Stretch(stretchstyle="+ stretchstyle+")'";
eval(cmd);
updateTransCode();
}
function stripsTransChange(){
controlObject = getControlObject("movementList");
motion = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Strips(motion="+ motion+")'";
eval(cmd);
updateTransCode();
}
function wheelTransChange(){
controlObject = getControlObject("spokesList");
spokes = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Wheel(spokes="+ spokes+")'";
eval(cmd);
updateTransCode();
}
function wipeTransChange(){
controlObject = getControlObject("wipeReverseSwitch");
motion = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("gradientSizeList");
gradientSize = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("wipeStyleList");
wipestyle = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.GradientWipe(GradientSize="+ gradientSize+",wipestyle=" + wipestyle +",motion=" + motion +")'";
eval(cmd);
updateTransCode();
}
function zigzagTransChange(){
controlObject = getControlObject("zigzagGridSizeXList");
gridSizeX = controlObject.options[controlObject.selectedIndex].value;
controlObject = getControlObject("zigzagGridSizeYList");
gridSizeY = controlObject.options[controlObject.selectedIndex].value;
cmd = "imgObj.style.filter='progid:DXImageTransform.Microsoft.Zigzag(GridSizeX="+ gridSizeX+",GridSizeY=" + gridSizeY +")'";
eval(cmd);
updateTransCode();
}
</SCRIPT>
<LINK REL="stylesheet" TYPE="text/css" HREF="IASample.css" />
<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode {}{ font-size:110%; }
PRE.clsSyntax {}{ font-size:100%; }
TD DIV.clsBeta {}{ display:none;}
MSHelp\:link {}{
color:#0000ff;
text-decoration:underline;
cursor:hand;
hoverColor:#3366ff;
filterString: ;}
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onload="switchContent(filterSection);">
<!-- Title and Description -->
<div class="title bar" style="position:relative; top:0; left:0; z-index:10">Filters and Transitions Master Sample</div>
<DIV class="desbar" id="oDesc"style="padding:5px; font:8pt verdana; HEIGHT: 75; LEFT: 0; TOP:0px; WIDTH: 100%; z-index: 3; ">
You can use the controls on the left side of the window to apply and modify various filters and transitions. First, select the type of effect: Filters or Transitions. Next, select a filter or transition from the drop-down list. If the selected effect supports specific features, you can use controls on the lower left side of the window to further modify the effect. The code used to generate the effect is shown below the controls section.
</DIV>
<DIV class="desbar" style="height:0">
<!-- Rendered content -->
<SPAN ID="oLiveSpan" style="POSITION: absolute; TOP: 115px; LEFT:330px; WIDTH: 300px; " >
<SPAN ID="imgObj" style="305; height:150; font:bold 9pt verdana ; line-height:1.3; padding-left:13px; padding-right:10px"><IMG ID="oImg" align="left" style="margin:8px;"><DIV id="imgObjText"></DIV></SPAN>
</SPAN>
<!-- Control Panel -->
<SPAN ID="oControlPanel" style="LEFT: 0px; POSITION: relative; TOP: -10; WIDTH: 300; HEIGHT: 250; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 15px; z-index: 5; ">
<BR>
<P>Effect Type: <INPUT TYPE=radio NAME="DemoChoice" VALUE="Filters" onclick="switchContent(filterSection); imgObj.style.color='darkred'; imgObj.style.fontWeight='bold';" CHECKED> Filters
<INPUT TYPE=radio NAME="DemoChoice" VALUE="Transitions" onclick="switchContent(transitionSection); imgObj.style.color='black'; imgObj.style.fontWeight='normal';"> Transitions
</P>
<SPAN ID="oContentHolder">
</SPAN>
<SPAN ID="oControlsSpan">
</SPAN>
</SPAN>
</DIV>
<!-- Copy Code Bar -->
<SPAN BGCOLOR="#DDDDDD" class="bar" style="POSITION: relative; z-index:10; HEIGHT: 35px; LEFT: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; TEXT-ALIGN: center; TOP: 0px; WIDTH: 100%;">
<BUTTON STYLE="margin-top:3; margin-bottom:3;" onclick="copy2Clipboard();">
Copy Code to Clipboard
</BUTTON>
</SPAN>
<!-- Code -->
<SPAN id=oCodeSpan style="position:relative; FONT-FAMILY: courier new; font-size: 9pt; line-height:1.5; LEFT: 0px; TOP: 0px; WIDTH: 100%; padding-top: 22px; padding-right: 5px; padding-bottom: 22px; padding-left: 5px; overflow: scroll; z-index: 4; height:30%;">
<SPAN ID="oCodePre" style=" HEIGHT: 100%; WIDTH: 95%">
</SPAN>
</SPAN>
<!-- Copyright bar -->
<div class="bar" style="position:relative; top:0; padding-left:5px; padding-top:5px"><MSHelp:link xmlns:MSHelp="http://msdn.microsoft.com/mshelp" keywords="msdn_copyright" TABINDEX="0">© 2005 Microsoft Corporation. All rights reserved.</MSHelp:link>.</div>
<!-- Hidden Controls -->
<!--Filter-->
<SPAN id=filterSection style="DISPLAY: none" isSource="TRUE">
Select a filter:
<SELECT id=oSelect onchange=changeFilter()>
<OPTION value=progid:DXImageTransform.Microsoft.Alpha SELECTED>Alpha</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.AlphaImageLoader>AlphaImageLoader</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.BasicImage >BasicImage</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Blur>Blur</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Chroma>Chroma</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.DropShadow>DropShadow</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Emboss >Emboss</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Engrave>Engrave</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Glow>Glow</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Gradient>Gradient</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.MotionBlur>MotionBlur</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Pixelate>Pixelate</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Shadow>Shadow</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Wave>Wave</OPTION>
</SELECT><hr></SPAN>
<!--Transition -->
<SPAN id=transitionSection style="DISPLAY: none" isSource="TRUE">
Select a transition:
<SELECT id=oSelect onchange=changeTrans();>
<OPTION value=progid:DXImageTransform.Microsoft.Barn() SELECTED>Barn</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Blinds()>Blinds</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Checkerboard()>Checkerboard</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Fade()>Fade</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.GradientWipe()>GradientWipe</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Inset()>Inset</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Iris()>Iris</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Pixelate()>Pixelate</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.RadialWipe()>RadialWipe</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.RandomBars()>Random Bars</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.RandomDissolve()>Random Dissolve</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Slide()>Slide</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Spiral()>Spiral</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Stretch()>Stretch</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.CrStrips()>Strips</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Wheel()>Wheel</OPTION>
<OPTION value=progid:DXImageTransform.Microsoft.Zigzag()>Zigzag</OPTION>
</SELECT>
<BUTTON onclick=transStart(oImg) width="25">Play</BUTTON><hr></SPAN>
<!--Alpha -->
<SPAN id=oAlphaControls style="DISPLAY: none" isSource="TRUE"><BR/>
Style:
<SELECT onchange=alphaFilterChange() name=styleList>
<OPTION value=0>0 - Uniform Opacity</OPTION>
<OPTION value=1 SELECTED>1 - Linear Opacity Change</OPTION>
<OPTION value=2>2 - Radial Opacity Change</OPTION>
<OPTION value=3>3 - Rectangular Opacity Change</OPTION>
</SELECT> <BR/><BR/>
Opacity:
<SELECT onchange=alphaFilterChange() name=opacityList>
<OPTION value=0>0</OPTION>
<OPTION value=25 SELECTED>25</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=75>75</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
FinishOpacity:
<SELECT onchange=alphaFilterChange() name=finishOpacityList>
<OPTION value=0>0</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=75>75</OPTION>
<OPTION value=100 SELECTED>100</OPTION>
</SELECT> <BR/><BR/>
StartX:
<SELECT onchange=alphaFilterChange() name=startXList>
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=75>75</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
FinishX:
<SELECT onchange=alphaFilterChange() name=finishXList>
<OPTION value=0>0</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=75>75</OPTION>
<OPTION value=100 SELECTED>100</OPTION>
</SELECT>
<BR/><BR/>
StartY:
<SELECT onchange=alphaFilterChange() name=startYList>
<OPTION value=0>0</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=75>75</OPTION>
<OPTION value=100 SELECTED>100</OPTION>
</SELECT>
FinishY:
<SELECT onchange=alphaFilterChange() name=finishYList>
<OPTION value=0 SELECTED>0</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=75>75</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
</SPAN>
<!--AlphaImageLoader -->
<SPAN id=oAlphaImageLoaderControls style="DISPLAY: none" isSource="TRUE"><BR/>
Src (source image):
<SELECT onchange=alphaImageLoaderFilterChange() name=srcList>
<OPTION value='notebook.GIF' SELECTED>Spiral Bound</OPTION>
<OPTION value='MOUSE2.GIF'>Mouse</OPTION>
</SELECT>
<BR/><BR/>SizingMethod:
<SELECT onchange=alphaImageLoaderFilterChange() name=sizingMethodList>
<OPTION value='crop' SELECTED>Crop - Crop at boundaries</OPTION>
<OPTION value='image'>Image - Normal image size</OPTION>
<OPTION value='scale'>Scale - Scale to window</OPTION>
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<!-- Gradient -->
<SPAN id=oGradientControls style="DISPLAY: none" isSource="TRUE"><BR/>
GradientType:
<SELECT onchange=gradientFilterChange() name=GradientTypeList>
<OPTION SELECTED value=0>0</OPTION>
<OPTION value=1>1</OPTION>
</SELECT>
<BR/><BR/>
StartColorStr:
<SELECT onchange=gradientFilterChange() name=StartColorStrList>
<OPTION SELECTED value=#ff00ff>#ff00ff</OPTION>
<OPTION value=#006400>#006400</OPTION>
<OPTION value=#0000ff>#0000ff</OPTION>
<OPTION value=#7b68ee>#7b68ee</OPTION>
<OPTION value=#ffe4e1>#ffe4e1</OPTION>
<OPTION value=#7fffd4>#7fffd4</OPTION>
<OPTION value=#ff8c00>#ff8c00</OPTION>
<OPTION value=#ff4500>#ff4500</OPTION>
<OPTION value=#00ff99>#00ff99</OPTION>
<OPTION value=#ffdead>#ffdead</OPTION>
</SELECT>
<BR/><BR/>
EndColorStr:
<SELECT onchange=gradientFilterChange() name=EndColorStrList>
<OPTION SELECTED value=#00ff99>#00ff99</OPTION>
<OPTION value=#ff00ff>#ff00ff</OPTION>
<OPTION value=#006400>#006400</OPTION>
<OPTION value=#0000ff>#0000ff</OPTION>
<OPTION value=#7b68ee>#7b68ee</OPTION>
<OPTION value=#ffe4e1>#ffe4e1</OPTION>
<OPTION value=#7fffd4>#7fffd4</OPTION>
<OPTION value=#ff8c00>#ff8c00</OPTION>
<OPTION value=#ff4500>#ff4500</OPTION>
<OPTION value=#ffdead>#ffdead</OPTION>
</SELECT>
<BR/><BR/><BR/><BR/>
</SPAN>
<!-- Glow -->
<SPAN id=oGlowControls style="DISPLAY: none" isSource="TRUE"><BR/>
Color:
<SELECT onchange=glowFilterChange() name=GlowColorList>
<OPTION SELECTED value=#ff00ff>#ff00ff</OPTION>
<OPTION value=#006400>#006400</OPTION>
<OPTION value=#0000ff>#0000ff</OPTION>
<OPTION value=#7b68ee>#7b68ee</OPTION>
<OPTION value=#ffe4e1>#ffe4e1</OPTION>
<OPTION value=#7fffd4>#7fffd4</OPTION>
<OPTION value=#ff8c00>#ff8c00</OPTION>
<OPTION value=#ff4500>#ff4500</OPTION>
<OPTION value=#00ff99>#00ff99</OPTION>
<OPTION value=#ffdead>#ffdead</OPTION>
</SELECT>
<BR/><BR/>
Strength:
<SELECT onchange=glowFilterChange() name=GlowStrengthList>
<OPTION SELECTED value=5>5</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
<BR/><BR/><BR/><BR/>
</SPAN>
<!-- Motion Blur -->
<SPAN id=oMotionBlurControls style="DISPLAY: none" isSource="TRUE"><BR/>
Direction:
<SELECT onchange=motionBlurFilterChange() name=MotionBlurDirectionList>
<OPTION SELECTED value=0>0</OPTION>
<OPTION value=45>45</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=135>135</OPTION>
<OPTION value=180>180</OPTION>
<OPTION value=225>225</OPTION>
<OPTION value=270>270</OPTION>
<OPTION value=315>315</OPTION>
</SELECT>
<BR/><BR/>
Strength:
<SELECT onchange=motionBlurFilterChange() name=MotionBlurStrengthList>
<OPTION SELECTED value=5>5</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
<BR/><BR/><BR/><BR/>
</SPAN>
<!-- Shadow --><BR/>
<SPAN id=oShadowControls style="DISPLAY: none" isSource="TRUE">
Direction:
<SELECT onchange=shadowFilterChange() name=ShadowDirectionList>
<OPTION SELECTED value=0>0</OPTION>
<OPTION value=45>45</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=135>135</OPTION>
<OPTION value=180>180</OPTION>
<OPTION value=225>225</OPTION>
<OPTION value=270>270</OPTION>
<OPTION value=315>315</OPTION>
</SELECT>
<BR/><BR/>
Color:
<SELECT onchange=shadowFilterChange() name=ShadowColorList>
<OPTION SELECTED value=#ff00ff>#ff00ff</OPTION>
<OPTION value=#006400>#006400</OPTION>
<OPTION value=#0000ff>#0000ff</OPTION>
<OPTION value=#7b68ee>#7b68ee</OPTION>
<OPTION value=#ffe4e1>#ffe4e1</OPTION>
<OPTION value=#7fffd4>#7fffd4</OPTION>
<OPTION value=#ff8c00>#ff8c00</OPTION>
<OPTION value=#ff4500>#ff4500</OPTION>
<OPTION value=#00ff99>#00ff99</OPTION>
<OPTION value=#ffdead>#ffdead</OPTION>
</SELECT>
<BR/><BR/>
Strength:
<SELECT onchange=shadowFilterChange() name=ShadowStrengthList>
<OPTION SELECTED value=5>5</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
<BR/><BR/><BR/><BR/>
</SPAN>
<!-- Wave -->
<SPAN id=oWaveControls style="DISPLAY: none" isSource="TRUE"><BR/>
Freq:
<SELECT onchange=waveFilterChange() name=WaveFreqList>
<OPTION SELECTED value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=50>50</OPTION>
</SELECT>
<BR/><BR/>
LightStrength:
<SELECT onchange=waveFilterChange() name=WaveLightStrengthList>
<OPTION SELECTED value=10>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
<OPTION value=40>40</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=60>60</OPTION>
<OPTION value=70>70</OPTION>
<OPTION value=80>80</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
<BR/><BR/>
Phase:
<SELECT onchange=waveFilterChange() name=WavePhaseList>
<OPTION SELECTED value=10>10</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=30>30</OPTION>
<OPTION value=40>40</OPTION>
<OPTION value=50>50</OPTION>
<OPTION value=60>60</OPTION>
<OPTION value=70>70</OPTION>
<OPTION value=80>80</OPTION>
<OPTION value=90>90</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
<BR/><BR/>
Strength:
<SELECT onchange=waveFilterChange() name=WaveStrengthList>
<OPTION SELECTED value=5>5</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=20>20</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
<BR/><BR/><BR/><BR/>
</SPAN>
<!--Emboss -->
<SPAN id=oEmbossControls style="DISPLAY: none" isSource="TRUE">
Bias:
<SELECT onchange=embossFilterChange() name=biasList>
<OPTION value=-0.9>-0.9</OPTION>
<OPTION value=-0.5>-0.5</OPTION>
<OPTION value=-0.2>-0.2</OPTION>
<OPTION value=0.00 SELECTED>0.00</OPTION>
<OPTION value=0.2>0.2</OPTION>
<OPTION value=0.5>0.5</OPTION>
<OPTION value=0.9>0.9</OPTION>
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<!--Engrave -->
<SPAN id=oEngraveControls style="DISPLAY: none" isSource="TRUE">
Bias:
<SELECT onchange=engraveFilterChange() name=biasList>
<OPTION value=-0.9>-0.9</OPTION>
<OPTION value=-0.5>-0.5</OPTION>
<OPTION value=-0.2>-0.2</OPTION>
<OPTION value=0.00 SELECTED>0.00</OPTION>
<OPTION value=0.2>0.2</OPTION>
<OPTION value=0.5>0.5</OPTION>
<OPTION value=0.9>0.9</OPTION>
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<!--Blur -->
<SPAN id=oBlurControls style="DISPLAY: none" isSource="TRUE"><BR/>
PixelRadius:
<SELECT onchange=blurFilterChange() name=pixelRadiusList>
<OPTION value=0>0</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=20>20</OPTION>
</SELECT> <BR/><BR/>
<INPUT onclick=blurFilterChange() type=checkbox name=makeShadowSwitch>
MakeShadow</INPUT>
<BR><BR>ShadowOpacity:
<SELECT onchange=blurFilterChange() name=shadowOpacityList>
<OPTION value=0.00>0.00</OPTION> <OPTION value=0.25>0.25</OPTION>
<OPTION value=0.50>0.50</OPTION> <OPTION value=0.75>0.75</OPTION>
<OPTION value=1.00 SELECTED>1.00</OPTION>
</SELECT> <BR/><BR/>
</SPAN>
<!-- Pixelate -->
<SPAN id=oPixelateFilterControls style="DISPLAY: none" isSource="TRUE"><BR/>
MaxSquare:
<SELECT onchange=pixelateFilterChange() name=maxSquareFList>
<OPTION value=2>2</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=10 SELECTED>10</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
</SELECT>
<BR/><BR/><BR/><BR/>
</SPAN>
<!-- DropShadow -->
<SPAN id=oDropShadowControls style="DISPLAY: none" isSource="TRUE"><BR/>
Color:
<SELECT onchange=dropShadowFilterChange() name=shadowColorList>
<OPTION value=DDDDDD>Light Gray (DDDDDD)</OPTION>
<OPTION value=999999 SELECTED>Dark Gray (999999)</OPTION>
<OPTION value=000000>Black (000000)</OPTION>
<OPTION value=FFFF00>Yellow (FFFF00)</OPTION>
<OPTION value=0000FF>Blue (0000FF)</OPTION>
</SELECT>
<BR><BR>
OffX: <SELECT onchange=dropShadowFilterChange() name=OffsetXList>
<OPTION value=-5>-5</OPTION>
<OPTION value=-3>-3</OPTION>
<OPTION value=-1>-1</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
</SELECT>
OffY: <SELECT onchange=dropShadowFilterChange() name=OffsetYList>
<OPTION value=-5>-5</OPTION>
<OPTION value=-3>-3</OPTION>
<OPTION value=-1>-1</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5 SELECTED>5</OPTION>
</SELECT><BR><BR>
<INPUT onclick=dropShadowFilterChange() type=checkbox CHECKED name=positiveSwitch>Positive</INPUT>
</SPAN>
<!--Chroma-->
<SPAN id=oChromaControls style="DISPLAY: none" isSource="TRUE"><BR/>
Color:
<SELECT onchange=chromaFilterChange() name=chromaColorList>
<OPTION value='#FFFFFF' SELECTED>White (FFFFFF)</OPTION>
<OPTION value='#87CEEB'>Sky blue (87CEEB)</OPTION>
<OPTION value='#8B0000'>Dark red(8B0000)</OPTION>
<OPTION value='#000000'>Black (000000)</OPTION>
</SELECT><BR/><BR/><BR/><BR/>
</SPAN>
<!--BasicImage -->
<SPAN
id=oBasicImageControls style="DISPLAY: none" isSource="TRUE"><BR/>
Rotation:
<SELECT onchange=basicImageFilterChange() name=rotationList>
<OPTION value=0 SELECTED>0 - 0 degrees</OPTION>
<OPTION value=1>1 - 90 degrees</OPTION>
<OPTION value=2>2 - 180 degrees</OPTION>
<OPTION value=3>3 - 270 degrees</OPTION>
</SELECT><BR/><BR/>
Opacity: <SELECT onchange=basicImageFilterChange() name=basicImageOpacityList>
<OPTION value=0.00>0.00</OPTION>
<OPTION value=0.25>0.25</OPTION>
<OPTION value=0.50>0.50</OPTION>
<OPTION value=0.75>0.75</OPTION>
<OPTION value=1.00 SELECTED>1.00</OPTION>
</SELECT><BR><BR/>
<INPUT onclick=basicImageFilterChange() type=checkbox name=mirrorSwitch>Mirror</INPUT>
<INPUT onclick=basicImageFilterChange() type=checkbox name=invertSwitch>Invert</INPUT><BR><BR/>
<INPUT onclick=basicImageFilterChange() type=checkbox name=xraySwitch>X-Ray</INPUT>
<INPUT onclick=basicImageFilterChange() type=checkbox name=grayscaleSwitch>Grayscale</INPUT>
</SPAN>
<!--Barn -->
<SPAN id=oBarnControls style="DISPLAY: none" isSource="TRUE"><BR/>
Motion:
<SELECT onchange=barnTransChange() name=barnMotionList>
<OPTION value=out SELECTED>Out - From inside outward</OPTION>
<OPTION value=in>In - From outside inward</OPTION>
</SELECT> <BR/><BR/>
Orientation:
<SELECT onchange=barnTransChange() name=barnVerticalList>
<OPTION value=horizontal>Horizontal</OPTION>
<OPTION value=vertical SELECTED>Vertical</OPTION>
</SELECT>
</SPAN>
<!--Blinds -->
<SPAN id=oBlindsControls style="DISPLAY: none" isSource="TRUE"><BR/>
Bands: <SELECT onchange=blindsTransChange() name=blindsBandsList>
<OPTION value=2>2</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=10 SELECTED>10</OPTION>
</SELECT>
Direction:
<SELECT onchange=blindsTransChange() name=blindsDirectionList>
<OPTION value=up SELECTED>Up</OPTION>
<OPTION value=down>Down</OPTION>
<OPTION value=left>Left</OPTION>
<OPTION value=right>Right</OPTION>
</SELECT>
</SPAN>
<!--Checkerboard -->
<SPAN id=oCheckerboardControls style="DISPLAY: none" isSource="TRUE"><BR/>
Direction: <SELECT onchange=checkerboardTransChange() name=checkerboardDirectionList>
<OPTION value=up>Up</OPTION>
<OPTION value=down>Down</OPTION>
<OPTION value=left>Left</OPTION>
<OPTION value=right SELECTED>Right</OPTION>
</SELECT><BR><BR>
SquaresX: <SELECT onchange=checkerboardTransChange() name=squaresXList>
<OPTION value=2 SELECTED>2</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=50>50</OPTION>
</SELECT>
SquaresY: <SELECT onchange=checkerboardTransChange() name=squaresYList>
<OPTION value=2 SELECTED>2</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=12>12</OPTION>
<OPTION value=50>50</OPTION>
</SELECT> </SPAN>
<!--Fade -->
<SPAN id=oFadeControls style="DISPLAY: none" isSource="TRUE"><BR/>
Overlap: <SELECT onchange=fadeTransChange() name=fadeOverlapList>
<OPTION value=0.00>0.00</OPTION>
<OPTION value=0.25>0.25</OPTION>
<OPTION value=0.50>0.50</OPTION>
<OPTION value=0.75>0.75</OPTION>
<OPTION value=1.00 SELECTED>1.00</OPTION>
</SELECT>
</SPAN>
<!--Iris -->
<SPAN id=oIrisControls
style="DISPLAY: none" isSource="TRUE"><BR/>
IrisStyle: <SELECT onchange=irisTransChange() name=irisStyleList>
<OPTION value=DIAMOND>Diamond</OPTION>
<OPTION value=CIRCLE>Circle</OPTION>
<OPTION value=CROSS>Cross</OPTION>
<OPTION value=PLUS SELECTED>Plus</OPTION>
<OPTION value=SQUARE>Square</OPTION>
<OPTION value=STAR>Star</OPTION>
</SELECT> <BR><BR>
Motion: <SELECT onchange=irisTransChange() name=irisMotionList>
<OPTION value=out SELECTED>Out - From inside outward</OPTION>
<OPTION value=in>In - From outside inward</OPTION>
</SELECT>
</SPAN>
<!--Pixelate Trans -->
<SPAN id=oPixelateTransControls style="DISPLAY: none" isSource="TRUE"><BR/>
MaxSquare: <SELECT onchange=pixelateTransChange() name=maxSquareTransList>
<OPTION value=2>2</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50 SELECTED>50</OPTION>
</SELECT>
</SPAN>
<!--RadialWipe -->
<SPAN id=oRadialWipeControls
style="DISPLAY: none" isSource="TRUE"><BR/>
WipeStyle: <SELECT onchange=radialWipeTransChange() name=radialWipeStyleList>
<OPTION value=CLOCK SELECTED>Clock</OPTION>
<OPTION value=WEDGE>Wedge</OPTION>
<OPTION value=RADIAL>Radial</OPTION>
</SELECT>
</SPAN>
<!--RandomBars -->
<SPAN id=oRandomBarsControls style="DISPLAY: none" isSource="TRUE"><BR/>
Orientation: <SELECT onchange=randomBarsTransChange() name=randomBarsVerticalList>
<OPTION value=horizontal SELECTED>Horizontal</OPTION>
<OPTION value=vertical>Vertical</OPTION>
</SELECT>
</SPAN>
<SPAN id=oRandomDissolveControls style="DISPLAY: none" isSource="TRUE"><BR/>
Duration: <SELECT onchange=randomDissolveTransChange() name=randomDissolveVerticalList>
<OPTION value=.5 SELECTED>.5</OPTION>
<OPTION value=1>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=10>10</OPTION>
</SELECT>
</SPAN>
<!--Slide -->
<SPAN id=oSlideControls style="DISPLAY: none" isSource="TRUE"><BR/>
SlideStyle: <SELECT onchange=slideTransChange() name=slideStyleList>
<OPTION value=HIDE SELECTED>Hide</OPTION>
<OPTION value=PUSH>Push</OPTION>
<OPTION value=SWAP>Swap</OPTION>
</SELECT> <BR/><BR/>
Bands: <SELECT onchange=slideTransChange() name=slideBandsList>
<OPTION value=1 SELECTED>1</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=10>10</OPTION>
<OPTION value=25>25</OPTION>
<OPTION value=50>50</OPTION>
</SELECT>
</SPAN>
<!--Spiral -->
<SPAN id=oSpiralControls style="DISPLAY: none" isSource="TRUE"><BR/>
GridSizeX: <SELECT onchange=spiralTransChange() name=spiralGridSizeXList>
<OPTION value=8>8</OPTION>
<OPTION value=16 SELECTED>16</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=64>64</OPTION>
</SELECT>
GridSizeY: <SELECT onchange=spiralTransChange() name=spiralGridSizeYList>
<OPTION value=8>8</OPTION>
<OPTION value=16 SELECTED>16</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=64>64</OPTION>
</SELECT>
</SPAN>
<!--Stretch -->
<SPAN id=oStretchControls style="DISPLAY: none" isSource="TRUE"><BR/>
StretchStyle: <SELECT onchange=stretchTransChange() name=stretchStyleList>
<OPTION value=HIDE>Hide</OPTION>
<OPTION value=PUSH>Push</OPTION>
<OPTION value=SPIN SELECTED>Spin</OPTION>
</SELECT>
</SPAN>
<!--Strips -->
<SPAN id=oStripsControls style="DISPLAY: none" isSource="TRUE"><BR/>
Motion: <SELECT onchange=stripsTransChange() name=movementList>
<OPTION value=leftup>Left-up</OPTION>
<OPTION value=leftdown SELECTED>Left-down</OPTION>
<OPTION value=rightup>Right-up</OPTION>
<OPTION value=rightdown>Right-down</OPTION>
</SELECT>
</SPAN>
<!--Wheel -->
<SPAN id=oWheelControls style="DISPLAY: none" isSource="TRUE"><BR/>
Spokes:
<SELECT onchange=wheelTransChange() name=spokesList>
<OPTION value=2>2</OPTION>
<OPTION value=4 SELECTED>4</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=10>10</OPTION>
</SELECT>
</SPAN>
<!--Wipe -->
<SPAN id=oWipeControls style="DISPLAY: none" isSource="TRUE"><BR/>
GradientSize: <SELECT onchange=wipeTransChange() name=gradientSizeList>
<OPTION value=0.00>0.00</OPTION>
<OPTION value=0.25 SELECTED>0.25</OPTION>
<OPTION value=0.50>0.50</OPTION>
<OPTION value=0.75>0.75</OPTION>
<OPTION value=1.00>1.00</OPTION>
</SELECT><BR><BR>
WipeStyle: <SELECT onchange=wipeTransChange() name=wipeStyleList>
<OPTION value=0 SELECTED>0 - Left-to-right motion</OPTION>
<OPTION value=1>1 - Top-to-bottom motion</OPTION>
</SELECT><BR><BR>
Motion: <SELECT onchange=wipeTransChange() name=wipeReverseSwitch>
<OPTION value=forward SELECTED>Forward</OPTION>
<OPTION value=reverse>Reverse</OPTION>
</SELECT>
</SPAN>
<!--ZigZag -->
<SPAN id=oZigzagControls style="DISPLAY: none" isSource="TRUE"><BR/>
GridSizeX:
<SELECT onchange=zigzagTransChange() name=zigzagGridSizeXList>
<OPTION value=8>8</OPTION>
<OPTION value=16 SELECTED>16</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=64>64</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
GridSizeY: <SELECT onchange=zigzagTransChange() name=zigzagGridSizeYList>
<OPTION value=8>8</OPTION>
<OPTION value=16 SELECTED>16</OPTION>
<OPTION value=32>32</OPTION>
<OPTION value=64>64</OPTION>
<OPTION value=100>100</OPTION>
</SELECT>
</SPAN>
<BR/><BR/><BR/><BR/>
</BODY>
</HTML>