changing td background images using javascript

Hi everyone -

I have been trying to change the background images in td cells using javascipt but with no success so far.

Is this actually possible?

Any help or knowledge on this would be appreciated.

Best wishes -


Philbert
javascript:smilie('')

One example of the many bits of code I have tried is:

<script language="JavaScript">
<!--
function changeBGImage(whichImage){
if (document.thanks){
document.thanks.background = 'images/' + whichImage +'.gif';
}
}

//-->
</script>

<table>
<tr>
<td name="thanks" background="images/blue.gif"><h1>Hello</h1></td>
<td><p>Let's try <a href="#" onclick="changeBGImage('red'); return false">changing the cell background image</a></p></td>
</tr>
</table>

Use Stylesheets. aka CSS

example

Working Example Here

Hope this helps you out.

much appreciated

I tried to take this a step further.

I wanted to modify the javascript part of the CSS version so I could have multiple images but it keeps returning an invalid arguement on...

document.getElementById('change').style.background Image = newImage;

Any help?



The javascript looks like this...

<script><!--
var theImages = new Array()

theImages[0] = 'url(portrait1.jpg)'
theImages[1] = 'url(portrait2.jpg)'

function changeImage(changer) {
newImage = theImages[changer];

document.getElementById('change').style.background Image = newImage;
}

//-->
</script>

Links look like...

<a href="javascript:changeImage(0);">bg1</a>
<a href="javascript:changeImage(1);">bg2</a>

Sidenote, I did change the td id to "change"

Did you get the multiple images one to work? I've also been trying with no luck!

try this...

function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
function loadImage(){
var imgs = new Array
(
"1.jpg", "2.jpg", "3.jpg"
);

var ic = imgs.length; // Number of alternative images
var choice = pickRandom(ic);
newImage = "url(../images/home/" + imgs[choice] + ")";

if (document.getElementById)
{
document.getElementById('main_pict').style.backgro undImage = newImage;
}
else if (document.all)
{
document.all('main_pict').style.backgroundImage = newImage;
}
else if (document.layers)
{
document.layers('main_pict').style.backgroundImage = newImage;
}

}


onLoad="loadImage();

Hello,
I think your problem is with how your setting the background Image.
Stupidly, you have to include the url( ) part like css.

Try doing this.

blar.style.backgroundImage="url('"+your_image+"')";

Hope that works

I have 1 problem with this, and that the "Click Me" thing.
Can you do this without having to click on a link?

I'm working on a website for my brothers company, and he wants a small image in the bottom right corner.
And he want's it to change when you go to another section of the website.

This is pretty simple, just put a different pic in the cells of each page.
But to spice it up I'm trying to get it to randomize a picture on every load.

I tried the code you wrote and it worked, buu i want it to change when you load the page.

I'm terrible at coding advanced stuff, HTML and a smaller amount of PHP is OK, but JS is out of my league.
If anyone has any tips on how this could be done, please reply =)

Thanks.
Vikholm