Image Transitions Effects (IE Only)

EXAMPLE 2

 
You can have multiple transitions within a page.  

Fade Box In Box Out Pixellate Circle In Circle Out Horizontal Checkerboard                                 Vertical Checkerboard Dissolve Wipe Up GradientWipe Spiral Wheel RadialWipe Iris Strips Barn Select a filter then click here: Filter Function being called will be displayed here (do not type):

This function takes filterFunctionName, and imageElementId, a src image and a destination image.   It can be called multiple times, and you can see an example above.  View source of this page to see the details.

function transformPicture(filterFunctionName, imageElementId, srcImage, targetImage)
{
  if (document.images)
  {
    if (filterFunctionName==null)
      filterFunctionName="blendTrans(duration=1)"

    if (imageElementId==null)
      imageElementId="myimgA"

    var message=filterFunctionName+": ";

    var canBeFiltered=false;
    if (document.images[imageElementId] && 
      document.images[imageElementId].style && 
      document.images[imageElementId].style.filters)
    {
      canBeFiltered=true;
      target=document.images[imageElementId];
    }
    if (document.all && document.getElementById(imageElementId))
    {
      target= document.getElementById(imageElementId);
      canBeFiltered=true;
    }
			
    if (dimages[curImage].complete)
    {
      document.images[imageElementId].src=srcImage.src;
      if (canBeFiltered)
      {
        if (target.filters  && target.filters[0])
          target.filters[0].stop();
       	target.style.filter=filterFunctionName;
        if (target.filters && target.filters[0])
          target.filters[0].apply();
        else
          message+=":Filter not available";
      }
      document.images[imageElementId].src=targetImage.src;
 	       
      if (canBeFiltered)
      {
        if (target.filters  && target.filters[0])
          target.filters[0].play();
      }
      else
        message+=":Filter not supported";
    }	
    else
      message+="Image not ready.  Please wait a while...";	
    if (!canBeFiltered)
    {
      message+="This browser does not support filter";	
    }
  }
  else
    message+="Broswer does not support image object.";	

  document.transForm.message.value=message;
}

<<MORE TUTORIALS >>

 

  
(C) F. Permadi

permadi@permadi.com