Blending Images with JavaScript

Discussion in 'Scripts' started by WorkAholicT, Sep 11, 2007.

to remove all ads.
  1. WorkAholicT

    WorkAholicT New Member

    Messages:
    3
    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.
     
  2. dmidwinter

    dmidwinter New Member

    Messages:
    14
    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
     
    Last edited: Jan 16, 2010

Share This Page