Re: background image

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>
.

Relevant Pages

  • Re: 16:9 Woes
    ... My standards aren't necessarily that rigorous, but I can be a pest when people do things they can't explain - such as blindly resize images into a magic resolution using magic numbers that don't seem to add up, or when different people are using _different_ magic numbers for what is supposedly the same procedure, and can't explain the difference. ... files, both stills and video, yet renders DVD-ready files ... Surely they have lots of more important things on their to-do list, such as preparing a set of new pastel-colored templates, or programming in yet another wobbly transition effect. ... square-pixel 4:3 images (which we have processed in such a way that they will end up being pillarboxed in the middle of a 16F16 frame, and in the correct aspect ratio as well) or ...
    (rec.video.desktop)
  • Re: ff event problem
    ... event although i assign the top nav bar events the same way. ... just to switch images, just to replace images. ... var contentdiv = document.getElementById; ... best (general recommendation; preferable recommendation) is to avoid having function calling other functions: doing that avoids problems and code maintenance. ...
    (comp.lang.javascript)
  • Re: javaScript and Ajax - IE7
    ... That's positive as all of the images should be in the document. ... The problem is IE7 uses a different DLL for xmlhttp in IE7. ... var xmlhttp = null; ...
    (comp.lang.javascript)
  • Re: Picture Slideshow
    ... paste back into the code fragment box. ... paste the code snippet in a Notepad text file, along with the URL to where I ... Autoplay on load as images will not start to cycle through. ... var preloadedimages=new Array ...
    (microsoft.public.publisher.webdesign)
  • Re: color calibration of microscopic images
    ... filters with a pore size of 0.025 um can be recommended as white ... tell you that I have acquired images of the grey patches of the Gretag ... I might also want to compare not color images but other properties ... (mass spectra, visible-light spectra, etc), but this will come ...
    (sci.techniques.microscopy)