PDA

View Full Version : Onload image fades


posefius
11-19-2006, 11:02 PM
I like to use onload image fades, like the script on http://clagnut.com/sandbox/imagefades/. But can anyone tell how to integrate this script into Pixelpost? Because I use images (portrait and landscape with different sizes).

GeoS
11-20-2006, 12:01 AM
There is all what you need to know. Please read it one more time staring from:
The code

The photo is a straightforward image in a div. Each has an id:

posefius
11-20-2006, 10:11 PM
I implemented the script the way you advised me. It works fine in Firefox and Opera, but not in IE6. I get an error function not supported. Can you help me fixing it?

Here is the javascript:

document.write("<style type='text/css'>#photo {visibility:hidden;}</style>");

function initImage() {
imageId = 'photo';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 5;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 20);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}