...
PDA

random background images in a table cell

taekwonjo
09-26-2003, 07:24 PM
does anyone know how to display a background image in a table cell that changes randomly each time the viewer reloads the page.

i've found scripts for random background color, random images, and random background images, but not random images that are a background in a specific table cell.

is this even possible?

thx 4 ur time:confused:
nolachrymose
09-26-2003, 07:52 PM
function preloadImages() {
var _imgs = new Array();
for(var i = 0; i < preloadImages.arguments.length; i++) {
_imgs[i] = new Image();
_imgs[i].src = preloadImages.arguments.length[i];
} return _imgs;
}

function randomImage(imgArr) {
var random = Math.random()*(imgArr.length - 1);
return imgArr[random].src;
}

var preloads = preloadImages("http://www.blah.com/blah.gif", "http://www.blah.com/blah2.gif");
document.getElementById("thisCell").style.backgroundImage = url(randomImage(preloads));

Hope that helps!

Happy coding! :)

Note: untested. :eek:
taekwonjo
09-27-2003, 04:52 AM
document.getElementById("thisCell") -- how do i designate the table i want to "thisCell"? I'm new to this code stuff so i don't know how to identify the table specifically, or how to designate it a variable i can use?
me'
09-27-2003, 10:51 AM
<table>
<tr>
<td id="thisCell">This is the cell</td>
</tr>
</table>


for example. The id="" attribute is what you want.
Bratchan
12-15-2008, 02:19 PM
function preloadImages() {
var _imgs = new Array();
for(var i = 0; i < preloadImages.arguments.length; i++) {
_imgs[i] = new Image();
_imgs[i].src = preloadImages.arguments.length[i];
} return _imgs;
}

function randomImage(imgArr) {
var random = Math.random()*(imgArr.length - 1);
return imgArr[random].src;
}

var preloads = preloadImages("http://www.blah.com/blah.gif", "http://www.blah.com/blah2.gif");
document.getElementById("thisCell").style.backgroundImage = url(randomImage(preloads));

Hope that helps!

Happy coding! :)

Note: untested. :eek:

Please forgive me for bumping this topic. I'm just having troubles trying to figure out how you put the code into my html ;_;' I'm knew to Java script so im not even sure were this goes
rangana
12-15-2008, 03:28 PM
Might help:

<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function()
{
ray.rand('thisCell');
},false):
window.attachEvent('onload',function()
{
ray.rand('thisCell');
}); // FF : IE1

var ray=
{
bgArr:['red','green','#565656','url(image.jpg)','url(image2.jpg)'], // Background you wish to show on the cell
rand:function(el)
{
var num = Math.floor(Math.random()*this.bgArr.length);
this.getID(el).style.background=this.bgArr[num];
},
getID:function(el){return document.getElementById(el);}
}
</script>
<table>
<tr>
<td id="thisCell">This is the cell</td>
</tr>
</table>
Bratchan
12-15-2008, 03:50 PM
Thank you soo much!!! ^.^
Bratchan
12-16-2008, 12:59 AM
Ok i have a couple of questions for this script. Is there a way to have the background NOT repeat, also to have the background positioned to the right.
Bratchan
12-18-2008, 01:54 AM
Is that possible to do it not thank u ^.*' sorry
rangana
12-18-2008, 01:57 AM
bgArr:['red','green','#565656','url(image.jpg) top right no-repeat','url(image2.jpg) top right no-repeat']


For further reading:
http://www.w3schools.com/css/css_background.asp
dtripodes
02-13-2009, 05:14 AM
Thanks for a great script!

I'm trying to make it external so visitors just don't view source and see my random photo names. Is something like this possible? So it could be invoked by:

<body onload="random_background_image();">

Here is the code below.

External JavaScript function (doesn't work... copies the working embedded script above in a previous post)
-------------------------------------------------

function random_background_image()
{
window.addEventListener?window.addEventListener('load',function()
{
ray.rand('thisCell');
},false):
window.attachEvent('onload',function()
{
ray.rand('thisCell');
}); // FF : IE1

var ray=
{
bgArr:['url(/images/photo_01.jpg)','url(/images/photo_02.jpg)','url(/images/photo_03.jpg)','url(/images/photo_04.jpg)','url(/images/photo_05.jpg)','url(/images/photo_06.jpg)'], // Background you wish to show on the cell
rand:function(el)
{
var num = Math.floor(Math.random()*this.bgArr.length);
this.getID(el).style.background=this.bgArr[num];
},
getID:function(el){return document.getElementById(el);}
}




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Random Background Image</title>
<script language="JavaScript" src="my_scripts.js"></script>
</head>

<body onload="random_background_image();">
<table border="5">
<tr>
<td id="thisCell">This is the cell</td>
</tr>
</table>
</body>
</html>
dtripodes
02-13-2009, 05:19 AM
In relation to the previous post, would pre-loading images speed up the script?

In an external javascript file, I used:

function newImage(arg)
{
rslt = new Image();
rslt.src = arg;
return rslt;
}

function preload_images()
{
photo_01 = newImage("/images/photo_01.jpg");
photo_02 = newImage("/images/photo_02.jpg");
photo_03 = newImage("/images/photo_03.jpg");
photo_04 = newImage("/images/photo_04.jpg");
photo_05 = newImage("/images/photo_05.jpg");
photo_06 = newImage("/images/photo_06.jpg");
}


And then called it with:
<body onload="preload_images();>

I wasn't sure if it seemed quicker or not -- any thoughts on this?
rangana
02-13-2009, 06:01 AM
You need to remove this part in the script:

function random_background_image()
{
window.addEventListener?window.addEventListener('load',function()
{


...and this part in your markup:

<body onload="random_background_image();">


That will make the script work again.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum