Change Table BG image upon mouseover of text/image

[lrickyutah]

I have a table with 6 cells, I'd like the table background image to change whenever you rollover a cell or an object (like a blank.gif).

So, basically, there would be 6 different bg images for the table. When an object (or cell) is mousedover the background of the table would change.

There has to be an easy way to do this, but I haven't found one. Can anyone point me in the right direction?

[Nile]

Here you go:

<script type="text/javascript">
var hover = function(table, class, image){ //table element, td's with class of `class` get the action, background image
	for(var i = 0; i < table.getElementsByClassName('h').length; i++){
		table.getElementsByClassName('h')[i].onmouseover = function(){
			this.style.backgroundImage = "url('"+image+"')";
		};
		table.getElementsByClassName('h')[i].onmouseout = function(){
			this.style.backgroundImage = "";
		}
	}
};

</script>
<table id="table">
	<tr>
		<td class="h">Blah</td>
		<td class="h">Blah</td>
		<td>Blah</td>
		<td>Blah</td>
	</tr>
	<tr>
		<td>Blah</td>
		<td class="h">Blah</td>
		<td>Blah</td>
		<td class="h">Blah</td>
	</tr>
</table>
<script type="text/javascript">
hover(document.getElementById('table'), 'h', 'image.gif');
</script>

[lrickyutah]

Thanks for the reply!

It's not quite what I'm looking for. I need the entire table's bg image to change not just the cell.

So if I hover over the first cell (or an object in it) the entire table has background image 1.
When I hover over the second cell (or an object in it) the entire table has background image 2.

and so on.

does that make sense?

[Nile]

<table id="table">
	<tr>
		<td>Blah</td>
		<td>Blah</td>
		<td>Blah</td>
		<td>Blah</td>
	</tr>
	<tr>
		<td>Blah</td>
		<td>Blah</td>
		<td>Blah</td>
		<td>Blah</td>
	</tr>
</table>
<script type="text/javascript">
document.getElementById('table').onmouseover = function(){
  this.style.background = "url('http://www.tizag.com/pics/tizagSugar.jpg')";
};
document.getElementById('table').onmouseout = function(){
  this.style.background = "";
};
</script>

[lrickyutah]

Nile,

You've probably forgotten more than I'll ever know, thank you.

That's closer, I'm looking for a script that will change the table background to one of six different things depending on what cell I'm hovering over.

So when I hover over cell 1, the whole table has background 1.
When I hover over cell 2, the whole table has background 2.
When I hover over cell 3, the whole table has background 3.
You get the idea.

Sorry that I haven't explained it very clearly.

[lrickyutah]

I think I have it, the code's not pretty but it works. I just layered two tables and then modified a piece of image rollover js.

[Nile]

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"