Prev: Name of class instance
Next: setTimeout() syntax
From: Thomas 'PointedEars' Lahn on 6 May 2008 18:03
tetris wrote:
> I have this little code wich is working quite good, it makes a slide
> show on the body background, anyone could guide me on how to add a
> fade effect as a transition between the images??

Since `opacity' is _not_ what you are looking for (we are talking
*background* images here), this is only going to work in Internet
Explorer and compatibles (that use MSHTML as layout engine, and
its DOM which provides Microsoft Filters). In a nutshell:

var b = document.body;
b.style.filter = "blendTrans(Duration=0.5)";
...
b.filters.Apply();
b.style.backgroundImage = "url(" + preload[i].src + ")";
b.filters.Play();

> var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
> j=0;
> p=Pic.length;

`Pic' was declared, but neither `j' or `p' have been. Change that.

You should also change `Pic' into `pic', as it does not refer to a
constructor. Maybe you like `aPic', where the prefix indicates
the "type" of object being referred to.

> function preLoad() {
> var preLoad = new Array()
> for (i = 0; i < p; i++){
> preLoad[i] = new Image();
> preLoad[i].src = Pic[i];
> }
> }

It would be better if `preLoad' was global so that it could be reused; `Pic'
would be unnecessary then. That said, method and variable should not have
the same identifier.

> function runBGSlideShow(){
> document.body.background = Pic[j];

The `background' attribute and consequently the `background' attribute
property are deprecated. Use style sheets and short-hand style property
access instead.

> j++;
> if (j > (p-1)){
> j=0
> }

You should lose the global `j', and `setTimeout' is a method of Window
objects and should explicitly be called so (preferably only after a run-time
feature test):

> setTimeout('runBGSlideShow()', 2000);
> }

A better approach (quick hack):

function isMethod(o, p)
{
return o && /\s*(function|object|unknown)\s*/i.test(typeof o[p])
&& o[p];
}

function runBGSlideShow(aImages, iDelay, index)
{
var b = document.body;
if (b)
{
if (isNaN(index) || i < 0)
{
// set default index, fix useless argument value
index = 0;

// use Microsoft Filters only if they appear to be supported
if (typeof b.style != "undefined"
&& typeof b.style.filter != "undefined")
{
b.style.filter = "blendTrans(Duration=0.5)";
}
}
else
{
// feature test for the blendTrans filter
var fltBlendTrans = typeof b.filters != "undefined" && b.filters
&& typeof b.filters.blendTrans != "undefined"
&& b.filters.blendTrans;

// if MS Filters are supported, initialize the transition effect
if (isMethod(fltBlendTrans, "Apply"))
{
fltBlendTrans.Apply();
}

// initiate or perform image switching
b.style.backgroundImage = "url(" + aImages[index].src + ")";

// if MS Filters are supported, play the transition effect
if (isMethod(fltBlendTrans, "Play"))
{
fltBlendTrans.Play();
}
}

if (isMethod(typeof window != "undefined" && window, "setTimeout"))
{
// set the timeout, calling ourselves then;
// remember the timeout for later clean-up
var me = arguments.callee;
me.timeout = window.setTimeout(
function() {
// use me.call(owner, ...) instead, if required
me(aImages, iDelay, Math.floor((index + 1) % aImages.length));
},
iDelay);

// clean up after ourselves if the user leaves/refreshes the site
if (isMethod(window, "clearTimeout")
&& isMethod(typeof dhtml != "undefined" && dhtml,
"replaceEventListener"))
{
var f = function() {
window.clearTimeout(me.timeout);

// break circular reference
me = null;
};

dhtml.replaceEventListener(b, "unload", f);
}
}
}
}

> </script>
> </head>
> <body onload="runBGSlideShow();preLoad()">

The order of statements should be reversed. First you should attempt to
preload the images, then you should run the slideshow.

<body onload="preloadImages(aImages); runBGSlideShow(aImages, 2000);">


Compare: http://PointedEars.de/hoverMe


PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
 | 
Pages: 1
Prev: Name of class instance
Next: setTimeout() syntax