MemberBritish
Interior
Design
Association
|
|
interior design consultants
|
|
Member British Interior Design Association |
|
|
div id='photoholder'>
Note that document.write does not work when XHTML is properly sent as application/xhtml+xml. You will either have to use HTML or serve your document as text/html.
Once everything on the page has loaded (crucially this includes images), an onload event is triggered, calling our initImage function:
window.onload = function() {initImage()}
The initImage function makes the photo completely tranpsarent by using the setOpacity function to set its opacity to zero. The photo can then be made visible and faded in using the fadeIn function:
function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
}
The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.
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;
}
The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity is specified as a percentage and increased 10% at a time. The loop stops once the opacity reaches 100%:
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
If you would like to discuss your requirements please do not hesitate to contact us
|
|