document.write('
');
document.write('function setOpacity(id, opacity) {
');
document.write(' var obj = document.getElementById(id);
');
document.write(' obj.style.opacity = (opacity / 100);
');
document.write(' obj.style.MozOpacity = (opacity / 100);
');
document.write(' obj.style.KhtmlOpacity = (opacity / 100);
');
document.write(' obj.style.filter = "alpha(opacity=" + opacity + ")";
');
document.write('}
');
document.write('
');
document.write('
');
document.write('function updateBgImage(id, src) {
');
document.write(' var obj = document.getElementById(id);
');
document.write(' obj.style.backgroundImage = "url("+src+")";
');
document.write('}
');
document.write('
');
document.write('function updateFrontImage(id, src) {
');
document.write(' var obj = document.getElementById(id);
');
document.write(' obj.src = src;
');
document.write('}
');
document.write('
');
document.write('function arrayToString(arr) {
');
document.write(' return str = \'new Array("\' + arr.join(\'", "\') + \'")\';
');
document.write('}
');
document.write('
');
document.write('function initFade(id, par, images) {
');
document.write(' //preload images
');
document.write(' var imageObj = new Image();
');
document.write(' for (x in images) {
');
document.write(' imageObj.src = images[x];
');
document.write(' }
');
document.write('
');
document.write(' doFadeSet(id, par, images);
');
document.write('}
');
document.write('
');
document.write('function fadeIn(id) {
');
document.write(' for (var i=0;i<=10;i++) {
');
document.write(' setTimeout(\'setOpacity("\'+id+\'",\'+i*10+\')\',100*i);
');
document.write(' }
');
document.write('}
');
document.write('
');
document.write('function fadeOut(id) {
');
document.write(' for (var i=10;i>=0;i--) {
');
document.write(' setTimeout(\'setOpacity("\'+id+\'",\'+i*10+\')\', 1000 - (100*i));
');
document.write(' }
');
document.write('}
');
document.write('
');
document.write('function doFadeSet(id, par, images) {
');
document.write(' var one = images.pop();
');
document.write(' images.unshift(one);
');
document.write(' var two = images.pop();
');
document.write(' images.unshift(two);
');
document.write(' var imageString = arrayToString(images);
');
document.write(' setOpacity(id, 0);
');
document.write(' updateFrontImage(id, one);
');
document.write(' fadeIn(id);
');
document.write(' setTimeout(\'updateBgImage("\'+par+\'", "\'+two+\'")\', 1000);
');
document.write(' setTimeout(\'updateFrontImage("\'+id+\'", "\'+two+\'")\', 3000);
');
document.write(' setTimeout(\'fadeOut("\'+id+\'")\', 2000);
');
document.write(' setTimeout(\'doFadeSet("\'+id+\'", "\'+par+\'", \'+imageString+\')\', 4000);
');
document.write('}
');
document.write('
');
document.write('
<script>');
document.write('var imageArray = new Array("image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg");
');
document.write('
</script>');
document.write('
<div id="container" style="width: 202px; height: 202px; padding 1px;">');
document.write('
<img src="transparent.gif" id="image" style="width: 200px; height: 200px; position: relative; top: 1px; left: 1px; margin: 0; padding: 0;">');
document.write('
</div>');
document.write('
');
document.write('
<a href="#" onclick="initFade(\'image\',\'container\', imageArray);">start the slideshow
</a>');
document.write('
');