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
>>