Well I don't want to start a JavaScript tutorial here, but a short
description of to-do's is :
Each time you want to change an image :
-Apply the filter to the holder of image e.g.
document.getElementById('holder').filters[0].apply();
-Change the image in holder e.g. document.getElementById('holder').src =
someNewPic;
-Play the transition e.g.
setTimeout('document.getElementById("holder").filters[0].play(3.0);', 1000);
//i do this with 1second timeout so image has some time to load
holder being <img src='y.jpg' id='holder' />
you should set constant width and heigth to #holder class so pictures fade
ok. Also #holder must have the progid:DXImageTransform style set
Jure Špik
----- Original Message -----
From: "Gerrie Warner" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Thursday, January 08, 2004 8:22 PM
Subject: [wdvltalk] can't make auto transitions
> Here's the code from MS - now I wonder how to add a few more images to it:
> alo it doesn't fade from one to the other automatically - you have to hit
> the Play Transitions button
>
> TIA! Gerrie
>
>
> <HEAD>
> <SCRIPT>
> var startImage ="fruit.gif";
> var endImage="mouse.gif";
> function doTrans() {
>
> imgObj.filters[0].apply();
> if (oImg.src.indexOf(startImage)!=-1) {
> oImg.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 {
> oImg.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();
> }
> </SCRIPT>
> </HEAD>
> <BODY>
> <SPAN id=imgObj style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER:
> progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50); FONT: 9pt/1.3
> verdana; WIDTH: 305px; COLOR: black; HEIGHT: 150px; BACKGROUND-COLOR:
> skyblue"><IMG id=oImg style="MARGIN: 8px" src="fruit.gif" align=left>
> <DIV id=imgObjText><BR><B>First Page</B><BR><BR>Using the <B>apply</B>
> method prepares this SPAN element for content
changes.</DIV></SPAN><BR><BR>
> <BUTTON onclick="doTrans()">Play Transition</BUTTON>
> </BODY>
>
>
> ____ • The WDVL Discussion List from WDVL.COM • ____
> To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
> Send Your Posts To: [EMAIL PROTECTED]
> To set a personal password send an email to [EMAIL PROTECTED] with the
words: "set WDVLTALK pw=yourpassword" in the body of the email.
> To change subscription settings to the wdvltalk digest version:
> http://wdvl.internet.com/WDVL/Forum/#sub
>
> ________________ http://www.wdvl.com _______________________
>
> You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
> To unsubscribe send a blank email to %%email.unsub%%
>
> To unsubscribe via postal mail, please contact us at:
> Jupitermedia Corp.
> Attn: Discussion List Management
> 475 Park Avenue South
> New York, NY 10016
>
> Please include the email address which you have been contacted with.
>
____ • The WDVL Discussion List from WDVL.COM • ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To set a personal password send an email to [EMAIL PROTECTED] with the words: "set
WDVLTALK pw=yourpassword" in the body of the email.
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]
To unsubscribe via postal mail, please contact us at:
Jupitermedia Corp.
Attn: Discussion List Management
475 Park Avenue South
New York, NY 10016
Please include the email address which you have been contacted with.
