Javascript random images
function preload()
{
var args = preload.arguments;
document.imgArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imgArray[i] = new Image;
document.imgArray[i].src = args[i];
}
}
function randomImg(){
preload('image1','image2','image3');
var q = new Array('image1','image2','image3');
var n = parseInt(Math.floor(Math.random()*3));
document.body.style.background = 'url('+ q[n] +') fixed no-repeat center
right #efefef';
}
window.onload = randomImg;
I call the function with a window.onload which causes the image to change everytime the page loads. In Netscape 7 it`s a bit trickier then in IE 6, sometimes it shows the same image three or four times in a row. The preload is necessary, otherwise sometimes the image doesn`t appear on the screen.
Updated on 2004/03:
That code was used in the first version, now I`ve changed it so that instead of attaching images to the background it displays text in a span. No need for a preload anymore. The change was brought over by the flow of the new design:
function randomQuotes()
{
var q = new Array('quote1','quote2','quote3');
var n = parseInt(Math.floor(Math.random()*3));
var rq = document.getElementById('quotes');
if(!rq) return;
rq.innerHTML = q[n];
}
window.onload = randomQuotes;
The tricky part is writing the quotes, which in Javascript are 'strings' (text to be rendered as such). If the phrase has to break up using a <br /> tag, it must be escaped like this:
\<br /\>
otherwise the parser doesn`t recognize it as a tag and renders it as part of the string.