View Full Version : Background fadein/fadeout

01-14-2009, 01:57 PM
I found this nice little script that will rotate a repeating background image through a series of images. (see below) I would like to have these images fade instead of simply swap out.

I was looking at the code for the DD Ultimate Fade-in slideshow (v1.51) http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm and was trying to see if there was a way to combine the two. Not being great at writing javascript I thought that someone here might know how to do this.

Your help is greatly appreciated!

Background Image SwapOut Script...

<script language="JavaScript">

// (C) 2003 CodeLifter.com
// Free for all users, but leave in this header

// =======================================
// set the following variables
// =======================================

// Set speed (milliseconds)
var speed = 1000

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below


// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

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

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


01-14-2009, 02:49 PM
The two scripts are incompatible. The body (the element used by the code you posted) contains everything seen on a page. Fading is accomplished using style. If the body fades, everything on your page fades. The ufade script works by fading one foreground image in over another foreground image. There is only one body, so this also makes things unlikely of easy combination.

One may be able to write a mod for ufade that uses four divisions instead of the the current three, with the three existing ones set to the height and width of the page, and the fourth superimposed over that to contain the content of the page. But this would have a number of potential problems, because it would institute a situation where everything on the page would be inside of an absolutely or relatively positioned container. Even without a fading slideshow going on underneath that, this sort of approach to designing a page often gives rise to unexpected results.

01-14-2009, 03:11 PM
Well that makes a lot of sense. Thank you for the explanation.