This piece of code creates a with a single background image. Inside of it is the same image, it's 100% transparent so that you can't see it. Both the image and
have an id.
Image 1
Then there is the code for calling the JavaScript function blendimage(). There are 4 parameters this time
The
){kind=link}
's ID.
The image's ID.
The path to the image file.
The duration of the transition in milliseconds.
And then, of course there is the JavaScript
*/
/*
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
*/
/*
Each link calls the function currentOpac() like this:
fade to 60%
The arguments are are used for the following:
Element's ID
Opacity to fade to
Speed, amount of milliseconds a transition with 100 steps would take
This is what the JavaScript code looks like:
*/
/*
function currentOpac(id, opacEnd, millisec) {
//standard opacity is 100
var currentOpac = 100;
//if the element has an opacity set, get it
//if(document.getElementById(id).style.opacity < 100) {
//currentOpac = document.getElementById(id).style.opacity * 100;
//}
//call for the function that changes the opacity
//opacity(id, currentOpac, opacEnd, millisec);
}
*/