Blending Images with JavaScript

[WorkAholicT]

I am trying to edit my script so the multiple images can blend in and out of each other. My script will work in one table cell but then it won't work when I place it in another cell further on in the page. Any advice?

The following is the script I'm using.

<script type = "text/javascript">
<!--
var whichImage = true;

function blend()
{
if ( whichImage ) {
image1.filters( "blendTrans" ).apply();
image1.style.visibility = "hidden";
image1.filters( "blendTrans" ).play();
}
else {
image2.filters( "blendTrans" ).apply();
image2.style.visibility = "hidden";
image2.filters( "blendTrans" ).play();
}
}

function reBlend ( fromImage )
{
if ( fromImage ) {
image1.style.zIndex -= 2;
image1.style.visibility = "visible";
}
else {
image1.style.zIndex += 2;
image2.style.visibility = "visible";
}

whichImage = !whichImage;
blend();
}
// -->
</script>

This is what I have in my table cell to call the function and blend the images.

<img id = "image2" width="400" height="175" src = "...."
onfilterchange = "reBlend( false )"
style = "position: absolute; filter: blendTrans( duration = 4 );
z-index: 1" alt = "First Transition Image" />

<img id = "image1" width="400" height="175" src = "..."
onfilterchange = "reBlend( true )"
style = "position: absolute; filter: blendTrans( duration = 4 );
z-index: 2" alt = "Second Transition Image" />

Thank you.

 

[dmidwinter]

mootools

Have you tried using the Mootools javasript library?

http://mootools.net/

I've used it on my site to blend images as you describe see here:

midwinterDesign | creative website design service, Abingdon, Oxfordshire