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

nickmealey

Apr 30 2005, 03:27 AM

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

. 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

CODE

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

CODE

so, lets wrap this up into a page:

CODE

<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://www.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://www.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://www.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

mbd5882

Apr 30 2005, 07:41 PM

Really cool, Like it alot.
Really, Thanks for this code.

Thanks,
FFC Webmaster,
Asad Haider.

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE