Entry
How can I make a TABLE transparent again after setting the background color or image?
How can I change the background color or the background image of a TABLE?
How can I change the background image size of a table to the table size?
Feb 18th, 2001 04:22
Martin Honnen, Mario Bothge,
IE4+ provides two ways to set the background color, the first with an
HTML attribute e.g.
<TABLE ID="tableID" BGCOLOR="green">
document.all.tableID.bgColor = 'green';
and the second with CSS e.g.
<TABLE ID="tableID" STYLE="background-color: green;">
document.all.tableID.style.backgroundColor = 'green';
The same holds for the background image, as an HTML attribute e.g.
<TABLE ID="tableID" BACKGROUND="whatever.gif">
document.all.tableID.background = 'whatever.gif';
and with CSS
<TABLE ID="tableID" STYLE="background-image: url(whatever.gif);">
document.all.tableID.style.backgroundImage = 'url(whatever.gif)';
NN6 however allows only CSS to be used so the following example that
works with IE4+ and NN6 uses the CSS way:
<HTML>
<HEAD>
<TITLE>
setting and resetting the background color or image of a TABLE
</TITLE>
<SCRIPT>
function setBgColor (elementID, color) {
if (document.all)
document.all[elementID].style.backgroundColor = color;
else if (document.getElementById)
document.getElementById(elementID).style.backgroundColor = color;
}
function setBackgroundImage (elementID, imgURL) {
if (document.all)
document.all[elementID].style.backgroundImage = 'url(' + imgURL +
')';
else if (document.getElementById)
document.getElementById(elementID).style.backgroundImage = 'url(' +
imgURL + ')';
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="green"
ONCLICK="setBgColor('aTable', 'green')"
>
<INPUT TYPE="button" VALUE="orange"
ONCLICK="setBgColor('aTable', 'orange')"
>
<INPUT TYPE="button" VALUE="no color"
ONCLICK="setBgColor('aTable', 'transparent')"
>
<INPUT TYPE="button" VALUE="image 1"
ONCLICK="setBackgroundImage('aTable', 'kiboInside.gif')"
>
<INPUT TYPE="button" VALUE="no image"
ONCLICK="setBackgroundImage('aTable', 'none')"
>
<TABLE ID="aTable" BORDER="1">
<SCRIPT>
for (var r = 0; r < 3; r++) {
document.write('<TR>');
for (var c = 0; c < 5; c++)
document.write('<TD>' + r + ', ' + c + ' Kibology<\/TD>');
document.write('<\/TR>');
}
</SCRIPT>
</TABLE>
</BODY>
</HTML>
