background image

T

tetris

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



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

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


function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j > (p-1)){
j=0
}
setTimeout('runBGSlideShow()', 2000);
}

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

None

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

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

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

}
}

function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j > (p-1)){
j=0}

setTimeout('runBGSlideShow()', 2000);

}

</script>
</head>
<body onload="runBGSlideShow();preLoad()">
Click to expand...


You can use the JQuery. There are already some method to make
animation in JQuery.
 
T

tetris

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??
Click to expand...
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
Click to expand...
function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image();
preLoad.src = Pic;
}
}
Click to expand...

function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j > (p-1)){
j=0}
Click to expand...

setTimeout('runBGSlideShow()', 2000);

</script>
</head>
<body onload="runBGSlideShow();preLoad()">
Click to expand...

You can use the JQuery. There are already some method to make
animation in JQuery.
Click to expand...


i dont want to use frameworks
 
R

RobG

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??
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image();
preLoad.src = Pic;
}
}
function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j > (p-1)){
j=0}
setTimeout('runBGSlideShow()', 2000);
}
</script>
</head>
<body onload="runBGSlideShow();preLoad()">
Click to expand...
Click to expand...

You can use the JQuery. There are already some method to make
animation in JQuery.
Click to expand...

i dont want to use frameworks
Click to expand...


It is normally done using setTimeout or setInterval to step through
various levels of opacity with a pause of say 50ms between steps -
increasing one image while decreasing the other. Search the archives
for "fade opacity".

You might like to look at this post in another group by Peter
Michaux :

<URL: http://groups.google.com/group/forkjavascript/browse_frm/thread/05d478a40367d215#
There was also a thread there on opacity performance - it's a little
old now but likely much of it still applies. It also suggests
strategies for ensuring the fade works well in different browsers and
slower platforms.
 
T

tetris

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??
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
function preLoad() {
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad = new Image();
preLoad.src = Pic;
}
}
function runBGSlideShow(){
document.body.background = Pic[j];
j++;
if (j > (p-1)){
j=0}
setTimeout('runBGSlideShow()', 2000);
}
</script>
</head>
<body onload="runBGSlideShow();preLoad()">
You can use the JQuery. There are already some method to make
animation in JQuery.
Click to expand...
Click to expand...

i dont want to use frameworks
Click to expand...

It is normally done using setTimeout or setInterval to step through
various levels of opacity with a pause of say 50ms between steps -
increasing one image while decreasing the other. Search the archives
for "fade opacity".

You might like to look at this post in another group by Peter
Michaux :

<URL:http://groups.google.com/group/forkjavascript/browse_frm/thread/05d47....



There was also a thread there on opacity performance - it's a little
old now but likely much of it still applies. It also suggests
strategies for ensuring the fade works well in different browsers and
slower platforms.
Click to expand...


thanks for your reply, i have found the effect but they are generally
implemented over a div on the document, i've been trying to tweak it
to get to the body.background of the document, will keep on trying..
 
T

Thomas 'PointedEars' Lahn

tetris said:
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??
Click to expand...

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.src + ")";
b.filters.Play();
var Pic = new Array('cow2.jpg','cow3.jpg','cow4.jpg');
j=0;
p=Pic.length;
Click to expand...

`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 = new Image();
preLoad.src = Pic;
}
}
Click to expand...


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];
Click to expand...

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
}
Click to expand...

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);
}
Click to expand...

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()">
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

random number generation 6
Background image not showing up on html page 3
Slide Show 1
javascript animation eating all memory 1
Changing text with picture 10
How do I add random number generation 1
JQuery - Preloading Images 0
Image not changing between "mute" & "un-mute" images. 5

Members online

No members online now.
Total: 86 (members: 1, guests: 85)
Robots: 131

Forum statistics

Threads
474,262
Messages
2,571,056
Members
48,769
Latest member
Clifft

Latest Threads

Top