Jump to content
xisto Community
Sign in to follow this  
Followers 0
nickmealey

I Finally Found A Simple Way To Do A Blendtrans - want some cool effect for your website?

By nickmealey, in Programming

Recommended Posts

nickmealey    0

nickmealey
Posted

ok, this code isn't supported by some browsers, like Firefox. But it still works for the OnMouseOver. This code basically fades one images into another one. Really cool effect :D . First thing: build or find 6 images, 3 pair. your going to want to build buttons that are close in relation, so they fade properly. Name the images as so: image1_on.gif , image1_off.gif image2_on.gif , image2_off.gif image3_on.gif , image3_off.gif now put these in a folder called: "images" inside your original one set this code inside your javascript tags


//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:BlendTrans(duration=0.4) }</STYLE>');var onImages=new Array();function Rollover(imgName, imgSrc){onImages[imgName] = new Image();onImages[imgName].src = imgSrc;}function turnOn(imgName){ if(document.images[imgName].filters != null)document.images[imgName].filters[0].apply();document.images[imgName].offSrc = document.images[imgName].src;document.images[imgName].src = onImages[imgName].src;if(document.images[imgName].filters != null)document.images[imgName].filters[0].play();}function turnOff(imgName){ if(document.images[imgName].filters != null)document.images[imgName].filters[0].stop();document.images[imgName].src = document.images[imgName].offSrc;}//Specify name of participating images, plus paths to their onMouseover replacements:Rollover("image1", "images/image1_on.gif");Rollover("image2", "images/image2_on.gif");Rollover("image3", "images/image3_on.gif");

next: set this in your body tags


<a href = "dynamicdrive.com" onMouseOver="turnOn('image1');" onMouseOut="turnOff('image1');"><img name="image1" class="imgTrans" src="images/image1_off.gif" border="0"></a><br><a href = "dynamicdrive.com" onMouseOver="turnOn('image2');" onMouseOut="turnOff('image2');"><img name="image1" class="imgTrans" src="images/image2_off.gif" border="0"></a><br><a href = "http://dynamicdrive.com; onMouseOver="turnOn('image3');" onMouseOut="turnOff('image3');"><img name="image1" class="imgTrans" src="images/image3_off.gif" border="0"></a><br>

so, lets wrap this up into a page:


<html><head><script type="text/javascript">//Generate transition CSS (transition=0 to 23)document.write('<STYLE TYPE="text/css">.imgTrans{ filter:BlendTrans(duration=0.4) }</STYLE>');var onImages=new Array();function Rollover(imgName, imgSrc){onImages[imgName] = new Image();onImages[imgName].src = imgSrc;}function turnOn(imgName){ if(document.images[imgName].filters != null)document.images[imgName].filters[0].apply();document.images[imgName].offSrc = document.images[imgName].src;document.images[imgName].src = onImages[imgName].src;if(document.images[imgName].filters != null)document.images[imgName].filters[0].play();}function turnOff(imgName){ if(document.images[imgName].filters != null)document.images[imgName].filters[0].stop();document.images[imgName].src = document.images[imgName].offSrc;}//Specify name of participating images, plus paths to their onMouseover replacements:Rollover("image1", "images/image1_on.gif");Rollover("image2", "images/image2_on.gif");Rollover("image3", "images/image3_on.gif");</script></head><body><a href = "http://dynamicdrive.com; onMouseOver="turnOn('image1');" onMouseOut="turnOff('image1');"><img name="image1" class="imgTrans" src="images/image1_off.gif" border="0"></a><br><a href = "http://dynamicdrive.com; onMouseOver="turnOn('image2');" onMouseOut="turnOff('image2');"><img name="image1" class="imgTrans" src="images/image2_off.gif" border="0"></a><br><a href = "http://dynamicdrive.com; onMouseOver="turnOn('image3');" onMouseOut="turnOff('image3');"><img name="image1" class="imgTrans" src="images/image3_off.gif" border="0"></a><br></body></html>

Hope that worked for you -_-


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept