filburt1
October 18 '02, 05:57 PM
Download the attached file in the post below this one and then view it in Internet Explorer. Cool, huh?
Here's how I did it (code from MSDN (http://msdn.microsoft.com/) and only works in late versions of IE):
<SCRIPT>
var startImage ="fruit.gif";
var endImage="mouse.gif";
var b = false;
function doTrans()
{
b = !b;
imgObj.filters[0].apply();
if (b)
{
imgObj.style.backgroundColor = "gold";
imgObjText.innerHTML = "First page<br>Another Line<br>Yet Another Line<br>Last Line" +
"<br>Just kidding, here's a really really long line!";
}
else
{
imgObj.style.backgroundColor = "skyblue";
imgObjText.innerHTML = "Second Page<br>Another Line<br>Yet Another Line<br>Last Line" +
"<br>Just kidding, here's a really really long line!";
}
imgObj.filters[0].play();
}
</SCRIPT>
<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"><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>
Clearly this is some advanced scripting and CSS so I can't explain every step, but change the blue and red text to what content you want. Any questions, just reply :)
Here's how I did it (code from MSDN (http://msdn.microsoft.com/) and only works in late versions of IE):
<SCRIPT>
var startImage ="fruit.gif";
var endImage="mouse.gif";
var b = false;
function doTrans()
{
b = !b;
imgObj.filters[0].apply();
if (b)
{
imgObj.style.backgroundColor = "gold";
imgObjText.innerHTML = "First page<br>Another Line<br>Yet Another Line<br>Last Line" +
"<br>Just kidding, here's a really really long line!";
}
else
{
imgObj.style.backgroundColor = "skyblue";
imgObjText.innerHTML = "Second Page<br>Another Line<br>Yet Another Line<br>Last Line" +
"<br>Just kidding, here's a really really long line!";
}
imgObj.filters[0].play();
}
</SCRIPT>
<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"><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>
Clearly this is some advanced scripting and CSS so I can't explain every step, but change the blue and red text to what content you want. Any questions, just reply :)