How to change cell background?


K

Keith Smith

How can I change the background IMAGE (not just color) of a CELL in a table?

I know that I can do this using CSS, but I really need to be able to do it
using JavaScript. Anyone know how?

Must be able to change the image for each cell - not the whole table.

Please help.
 
Ad

Advertisements

M

Mick White

Keith said:
How can I change the background IMAGE (not just color) of a CELL in a table?

I know that I can do this using CSS, but I really need to be able to do it
using JavaScript. Anyone know how?

Must be able to change the image for each cell - not the whole table.

Please help.

document.getElementById('foo').style.backgroundImage = "url(bar.gif)" ;

Mick
 
R

RobB

Keith said:
How can I change the background IMAGE (not just color) of a CELL in a table?

I know that I can do this using CSS, but I really need to be able to do it
using JavaScript. Anyone know how?

Must be able to change the image for each cell - not the whole table.

Please help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">


#foo td {
width: 200px;
height: 200px;
}
..test {
background: url(http://frostandkeading.com/K07_200-x-200.jpg)
no-repeat;
}

</style>
<script type="text/javascript">

function setCellBG(tdref, imgsrc)
{
if (null != tdref && tdref.style)
tdref.style.backgroundImage = 'url(' + imgsrc + ')';
}

window.onload = function()
{
setTimeout(
function()
{
var src = 'http://frostandkeading.com/K22_200-x-200.jpg';
var td = document.getElementById('foo').rows[1].cells[1];
setCellBG(td, src);
}, 3000);
}

</script>
</head>
<body>
<table>
<tbody id="foo">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td class="test"></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
 
A

azcn2503

Here is a handy function that lets multiple browsers perform this:

Put this in the <HEAD>:

<script type="text/javascript"><!--
function grab(o){return
document.all?document.all[o]:document.getElementById?document.getElementById(o):"";}
//--></script>

Then when you want to grab an object by its ID attribute:

<script type="text/javascript"><!--
grab("tablecell").style.backgroundImage="url(images/image1.jpg)";
//--></script>
 
K

Keith Smith

function grab(o){return
document.all?document.all[o]:document.getElementById?document.getElementById(o):"";}
//--></script>

Then when you want to grab an object by its ID attribute:

<script type="text/javascript"><!--
grab("tablecell").style.backgroundImage="url(images/image1.jpg)";
//--></script>

It doesn't seem to work for me. Would someone mind giving it a try and let
me know if it works for you?
 
R

RobG

Keith said:
<script type="text/javascript"><!--
function grab(o){return
document.all?document.all[o]:document.getElementById?document.getElementById(o):"";}

A more efficient test is to put document.getElementById first, as it
is supported by a wider range of browsers than document.all.
Therefore most browsers will not go to the second test. Rearranging
gives:

return document.getElementById? document.getElementById(o) :
document.all? document.all[o] : "";

When using the style object, you should test to see if it's supported
first, otherwise the user may be presented with an error message that
they have no idea how to remedy.
It doesn't seem to work for me. Would someone mind giving it a try and let
me know if it works for you?

Here is a full page below, there are many different ways to write
this, below is just an example. Over to you.



<html><head><title>play</title></head>
<body>

<script type="text/javascript">

// Given an element id,
// return a reference to the element
function grab(x){
return document.getElementById? document.getElementById(x) :
document.all? document.all[x] : "";
}

// Given an element id and image,
// change the background of the element to the image
function changeBGimg(id, image){
var x = grab(id);
if (x.style){
x.style.backgroundImage = 'url(' + image + ')';
}

}

</script>
<table border="1">
<tr>
<td onclick="
changeBGimg('cellA','a.jpg');
">Click to change background</td>
<td id="cellA"><div style="width:200px; height: 150px;"></div></td>
</tr>
</table>
</body</html>
 
Ad

Advertisements

G

Grant Wagner

Here is a handy function that lets multiple browsers perform this:

Put this in the <HEAD>:

<script type="text/javascript"><!--
function grab(o){return
document.all?document.all[o]:document.getElementById?document.getElementById(o):"";}
//--></script>

Instead of feature testing everytime you execute grab(), one can define
grab once at the beginning of the page and then reasonably assume that
the feature support will not change in that user agent for the lifetime
of the script:

<script type="text/javascript">
var grab;
if (document.getElementById)
{
grab = function(o)
{
return document.getElementById(o);
}
}
else if (document.all)
{
grab = function(o)
{
return document.all[o];
}
}
else
{
grab = function()
{
return { style:{} };
}
}
Then when you want to grab an object by its ID attribute:

<script type="text/javascript"><!--
grab("tablecell").style.backgroundImage="url(images/image1.jpg)";
//--></script>

Since your code makes the assumption that grab() is returning an object
that contains a property named -style-, but in some cases your version
of grab() returns an empty string, the line above may generate an error
on user agents which support neither document.getElementById nor
document.all.

In cases where the user agent supports neither document.getElementById
nor document.all, my solution returns an object with a -style- property
which can other arbitrary properties assigned to it.

Note that I'm not 100% convinced this is an adequate solution, but since
we tend to assume that the Node returned by document.getElementById and
document.all supports a -style- property, it seems reasonable to return
an object that has one even when we don't obtain a valid Node.
 
Ad

Advertisements

T

Thomas 'PointedEars' Lahn

Keith said:
<script type="text/javascript"><!--
function grab(o){return
document.all?document.all[o]:document.getElementById?document.getElementById(o):"";}
//--></script>

Omit the Comment Declaration Open delimiter (`<!--'), the JS single-line
comment (`//') and the Comment Declaration Close (`-->') delimiter. They
serve no reasonable purpose here.
It doesn't seem to work for me. Would someone mind giving it a try and
let me know if it works for you?

WFM, however I would rather use

setStyleProperty("id", "tablecell", 0,
"backgroundImage", "url(images/image1.jpg)");

from <http://pointedears.de/scripts/dhtml.js> instead.


PointedEars
 

Top