Ever wanting your picture to morph while working in that crappy Internet Explorer browser?
**Important**
If the images are just changing color, make sure they are aligned perfectly.
Also if you use a file where you have partial transparency AND YOU DO NOT WANT TO PILE IT put it on the bottom image (image after fading).
This can be accomplished using Javascript to change the CSS Opacity Element.
First, the Javascript, it is best to keep this in the header template because it is on every page.
Copy and paste this code wherever you want, but the image has to be in the Header Template or on the page you are using it.
Code:
<script type="text/javascript">
var TimeToFade = 1000.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}</script>
This code is basically saving to change the Opacity from 1 to 0 and vice versa, but using a timer to change the opacity to fade.
Now the code for the images.
Image One Represents the image you want to be viewed before fading
and Image Two is the image (url) you want to view after fading.
Code:
<div style="background: url(Image Two) no-repeat;"><img src="Image One" style="opacity: 1" id="fademe" onmouseover="fade('fademe')" onmouseout="fade('hi')"></div>
Live Demo!!! : http://dl.dropbox.com/u/17061172/hi/index.html