473,758 Members | 6,734 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to change cell background?

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.
Jul 23 '05 #1
7 4848
Keith Smith wrote:
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.getEle mentById('foo') .style.backgrou ndImage = "url(bar.gi f)" ;

Mick
Jul 23 '05 #2
Keith Smith wrote:
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.bac kgroundImage = 'url(' + imgsrc + ')';
}

window.onload = function()
{
setTimeout(
function()
{
var src = 'http://frostandkeading .com/K22_200-x-200.jpg';
var td = document.getEle mentById('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>

Jul 23 '05 #3
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?do cument.all[o]:document.getEl ementById?docum ent.getElementB yId(o):"";}
//--></script>

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

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

Jul 23 '05 #4
> <script type="text/javascript"><!--
function grab(o){return
document.all?do cument.all[o]:document.getEl ementById?docum ent.getElementB yId(o):"";}
//--></script>

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

<script type="text/javascript"><!--
grab("tablecell ").style.backgr oundImage="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?
Jul 23 '05 #5
Keith Smith wrote:
<script type="text/javascript"><!--
function grab(o){return
document.all? document.all[o]:document.getEl ementById?docum ent.getElementB yId(o):"";}
A more efficient test is to put document.getEle mentById 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.getEle mentById? document.getEle mentById(o) :
document.all? document.all[o] : "";
//--></script>

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

<script type="text/javascript"><!--
grab("tablece ll").style.back groundImage="ur l(images/image1.jpg)";
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.
//--></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?


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

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

<script type="text/javascript">

// Given an element id,
// return a reference to the element
function grab(x){
return document.getEle mentById? document.getEle mentById(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.backgro undImage = 'url(' + image + ')';
}

}

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

--
Rob
Jul 23 '05 #6
<az******@gmail .com> wrote in message
news:11******** **************@ g14g2000cwa.goo glegroups.com.. .
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?do cument.all[o]:document.getEl ementById?docum ent.getElementB yId(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.getEl ementById)
{
grab = function(o)
{
return document.getEle mentById(o);
}
}
else if (document.all)
{
grab = function(o)
{
return document.all[o];
}
}
else
{
grab = function()
{
return { style:{} };
}
}
</script>
Then when you want to grab an object by its ID attribute:

<script type="text/javascript"><!--
grab("tablecell ").style.backgr oundImage="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.getEle mentById nor
document.all.

In cases where the user agent supports neither document.getEle mentById
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.getEle mentById 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.

--
Grant Wagner <gw*****@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq
Jul 23 '05 #7
Keith Smith wrote:
<script type="text/javascript"><!--
function grab(o){return
document.all?do cument.all[o]:document.getEl ementById?docum ent.getElementB yId(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.
Then when you want to grab an object by its ID attribute:

<script type="text/javascript"><!--
grab("tablecell ").style.backgr oundImage="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?


WFM, however I would rather use

setStylePropert y("id", "tablecell" , 0,
"backgroundImag e", "url(images/image1.jpg)");

from <http://pointedears.de/scripts/dhtml.js> instead.
PointedEars
Jul 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
10447
by: John A. | last post by:
Hello all! I've got a big bunch of pages using tables for layout. Eventually I'll get them set up with more modernized code, but in the meantime I'd like to slip in a little quick holiday decoration. I'd like to insert a table cell with a fixed width (as much as such things can be fixed) and a repeating garland background so as to show up along the left side of the table, repeating down its length. Our site has a couple thousand...
1
3776
by: Michael | last post by:
How can I use onclick to change a table cell background color. I know I can use this.className=? to change the classname. But then I would have to put the code into every single table cell. I read once about using a collection method. Lets say a table has 100 TD Cells with a white background. I want to click on just 1 and then have it change to a Yellow background. Then when I click on a different Cell have the old one change back to...
2
6176
by: Pete Kipe | last post by:
I'm not a JavaScript programmer...but I'm trying to put together a simple menu system for a new website and need a little help. I have the following script: <SCRIPT language=javascript> <!-- Hide JavaScript from Java-Impaired Browsers function NavRollOver(oTd) {if (!oTd.contains(event.fromElement)) {oTd.bgColor="#CC0000";}} function NavRollOut(oTd) {if (!oTd.contains(event.toElement))
3
4775
by: michael | last post by:
I'm changing colors of table cells like this: <style type="text/css"> ..over {background-color: #bedddc} ..out {background-color: #99cccc} </style> <td onmouseover="this.className='over'" onmouseout="this.className='out'">
3
4766
by: Peter Williams | last post by:
Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+
6
11536
by: Barney Nicholls | last post by:
I have a datagrid and want to change the background color of the end column to denote that it is the only column that is not read only. I still want this column to be editable. I've found examples that let you change the background color of the cell but it but the cell no longer appears to be editable.
4
10778
by: HB | last post by:
So I have a table in ASP.NET <table runat="server" id="tblMyTable"> <tr> <td id="cellMyCell">word</td> </tr> </table> How do I reference the cell "cellMyCell" from the Vb.NET 1.1 code-behind to change the background color of the cell?
2
22069
by: Mark | last post by:
IE creates an object of every ID'd HTML tag (so it appears), and each object sets a property for any parameter I set in the tag. For example, my HTML might be: <td id='cell1' background='myimg.jpg' width='30'... </tdwhich IE will use to create a Javascript object called 'cell1' with properties of background and width, like so: cell1.background would have a value of 'myimg.jpg' and cell1.width would have a value of 30. I can change the...
2
3814
by: Jim | last post by:
How can I use JavaScript to change a background image in a table cell? Here's the code for the cell <td width="338" valign="top" background="../images/ LEC_Q1.jpg"><div align="right"></div></td> You can see that the background is set to the image LEC_Q1.jpg. I want to change the image LEC_Q1.jpg to LEC_Q1_faded.jpg after a user clicks a button and the only way I can figure out to do it is by using
0
9317
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10090
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9924
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9892
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
6580
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5190
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5343
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
3
3423
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2719
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.