I’ve got a banner that has a single image background in the CSS and it fades in but I’d like to set it up so it actually loaded an array of images. That is ‘if’ its possible so the users without JavaScript enabled still get the original image. Is this at all possible?
The original code is below
[code]function initImage()
{
imageId = ‘loader’;
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = “visible”;
fadeIn(imageId,0);
}
function fadeIn(objId,opacity)
{
if (document.getElementById)
{
obj = document.getElementById(objId);
if (opacity <= 100)
{
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout(“fadeIn(‘”+objId+”‘,”+opacity+”)”, 100);
}
}
}
function setOpacity(obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = “alpha(opacity:”+opacity+”)”;
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {
initImage();
}
# now if I put images into an array like (without the hashes of course)
##var pics = new Array(3); // Change this to reflext the number of ##slides
##var num = 0;
##var totalPics = 2; // 3 slides numbered 0 to 2
// Command to preload the images into the array
##for (num = 0; num <= totalPics; num++) {
## pics[num] = new Image();
## pics[num].src = “graphics/pic” + num + “.jpg”;
##}
Then how do I go about melding the array with the randomness. Any clues????
?
Edited to add code tags.
el.style.filter = "alpha(opacity:"+(currOpac*100)+")";
To this: el.style.filter = "alpha(opacity:"+currOpac+")";
Sorry about that. ?[URL=http://www.blog.lindenlandon.com/jslibrary/scripts.js]Javascript File[/URL]
[URL=http://www.blog.lindenlangdon.com]Translucent - (Banner is working perfectly now)[/URL]
function fadeIn(el, currOpac){
el = document.getElementById(el);
el.style.visibility = "visible"; // Un-hides the image.
currOpac += 3;
currOpac = (currOpac>100) ? 100 : currOpac;
el.style.filter = "alpha(opacity:"+currOpac+")";
el.style.KHTMLOpacity = currOpac / 100;
el.style.MozOpacity = (currOpac==100) ? 0.999 : currOpac; // Prevent flicker in Moz.
el.style.opacity = (currOpac==100) ? 0.999 : currOpac; // Prevent flicker in Moz.
if(currOpac < 100){
setTimeout("fadeIn('" + el.id + "', " + currOpac + ")", 40);
}
}
If this still doesn't work, then the only option would be to limit the opacity to 0.99 but this might become notice-able, so it's probably not a good idea.[URL=http://www.blog.lindenlangdon.com/prototype]Linden' Blog - Prototype folder (may be subject to changes at any time)[/URL]
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
Below this div a JavaScript call is used for hiding the base image from us, otherwise you would see the initial image followed by your desired fade in effect.[/quote]Actually, you wouldn't see any fade in effect, the onload call to the fade function is within the alter function.
document.getElementById(el_id).style.visibility = "hidden";
Is absolutely [i]essential[/i] for non-JavaScript compatibility, if you hide the image with the .css file then users with JavaScript disabled and CSS enabled simply won't see the image at all. You have admitted that you've done it, but what I'm unclear on is why you've done it? And you've done the same thing over at The id we called #loader in this tutorial will be written with JavaScript[/quote]Re-write:
but I've simply put it into my .styles stylesheet which is inside an @import statement and means only newer browsers will see it.[/quote]I'm not sure what this means.
<!-- As you can see this works equally well placing the image inside a div or a paragraph -->[/quote]And then you put it in a <div> tag anyway. :p
0.1.9 — BETA 6.14