I want to create the fading in effect that can be seen here [login to view URL] and I want it to be as good in Internet Explorer as it is in Firefox. Currently the effect is not up to standard in Internet Explorer (8) where the faded in text appears distorted.
## Deliverables
If javascript is disabled I want the image to display as it does when fully faded in in the javascript enabled version.
My current solution is based on this article [login to view URL]
I am looking for a cross browser solution (latest and previous versions of major browsers)
Any solution is acceptable but fixing my existing code would be ideal.
The solution must fade an image into an image. Not text into an image.
You must be able to explain how I can apply this technique to other images on the site if it isn't obvious. e.g. if your solution envolves making changes to the images.
My HTML
This is in the header...
<script type="text/javascript">
<!--
[login to view URL]("<style type='text/css'>#thephoto {visibility:hidden;}</style>");
function initImage() {
imageId = 'thephoto';
image = [login to view URL](imageId);
setOpacity(image, 0);
[login to view URL] = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if ([login to view URL]) {
obj = [login to view URL](objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 1;
[login to view URL]("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
[login to view URL] = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
[login to view URL] = opacity/100;
// Older Mozilla and Firefox
[login to view URL] = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
[login to view URL] = opacity/100;
}
[login to view URL] = function() {initImage()}
// -->
</script>
and then this is in the html body...
<div id="photoholder">
<img src="[login to view URL]" id="thephoto" width="755" height="380" />
</div>
My CSS
#photoholder {
width:755px;
height:380px;
background:#fff url('images/[login to view URL]') no-repeat;
}
#thephoto {
width:755px;
height:380px;
}
The file [login to view URL] is the image that is being faded in