Aaaah, I over thought the situation -- I thought you wanted to *fade*
between the images, not just choose one at random...
Here you go :)
<html>
<head>
<script>
function randomBG(targetObjID) {
var obj, imgs, randNum;
obj = document.getElementById(targetObjID);
imgs = new Array();
imgs.push( 'foo.jpg');
imgs.push( 'bar.jpg');
imgs.push( 'w007.png');
randNum = Math.random() * (imgs.length - 1);
randNum = Math.round(randNum);
obj.style.backgroundImage = imgs[randNum];
// Uncomment followning line to test
//alert(imgs[randNum]);
}
window.onload = function() { randomBG('swapMe'); };
</script>
</head>
<body>
<div id="swapMe">
Test div
</div>
</body>
</html>
Valid xhtml1.1... NOT! ;) (at least the script is
application/xhtml+xml friendly)
The next step for this script would be to adapt it to OOD, thereby
allowing other scripts to add to the imgs array without needing to
resort to global var's.
I'm 90% sure I've got a script at home that does the above, but fades
between the remaining images after choosing the initila one at
random.... I say 90% sure because I remember needing that
functionality for a client site but I may have ended up using an <img>
element due to problems with Opera < 7.5 and Safari < 1.1
If you're interested in that one, respond and I'll go digging tonight.
Cheers,
Andrew.
--------------------------------
http://leftjustified.net/
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
