Solved

Changing Table Cell Background

Posted on 1999-01-20
8
434 Views
Last Modified: 2008-09-09
Is there a way to change the src of a table cell background from within a JavaScript function?

thanx
0
Comment
Question by:aetheros
  • 5
  • 3
8 Comments
 
LVL 6

Expert Comment

by:PBall
ID: 1279978
if the table has an ID property, do something like:

myTable.background = "newimage.gif"
<table ID=myTable background="oldimage.gif">

Work on IE4, dunno about Netscape.
0
 
LVL 6

Expert Comment

by:PBall
ID: 1279979
Then again, went to Netscape Developer site, looking at their HTML tags reference, the TABLE tag doesn't have any Background property...

should I submit as answer then?
0
 
LVL 6

Expert Comment

by:PBall
ID: 1279980
Well, it turned out it does support it after all hehehe through CSS.

They gave an example using CSS class:

<style>
TABLE.withImage {
  background-image:url(images/background1.gif);
}
</style>
<script>
  classes.withImage.TABLE.backgroundImage = "images/background2.gif";
</script>

i guess it might also work if the table has an ID tag (perhaps, untested on Netscape):

<table id=myTable background="background1.gif">


<script>
  document.myTable.backgroundImage = "background2.gif" ? in NC?
0
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 

Author Comment

by:aetheros
ID: 1279981
I tried using your IE4 answer in the following page to test. It works on a whole table, but not a cell of that in that table, or a table in a table. This is close enough, though.
Two things to figure out before I give you the points:
a) it only works for images not cached. Once the image is cached...it won't update the background.
b) I don't understand how to use the Netscape answer provided.

here's the test script.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function flip(cellsrc,OnOff)
{
backTable.background="http://www.lhweb.com/graphics/"+cellsrc+"."+OnOff+".gif";
document.images["monitor"].src="http://www.lhweb.com/graphics/"+cellsrc+"."+OnOff+".gif";
}
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FORM>
<TABLE ID=backTable BACKGROUND="" CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH="216" HEIGHT="90">
<TR>
  <TD WIDTH="108" HEIGHT="30" BACKGROUND="http://www.lhweb.com/graphics/i.0.gif" ALIGN="CENTER">
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("i",1)>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("i",0)>
  </TD>
  <TD WIDTH="108" CELLPADDING=0 CELLSPACING=0 BORDER=0 BACKGROUND="http://www.lhweb.com/graphics/c.0.gif" ALIGN="CENTER">
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("c",1)>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("c",0)>
  </TD>
</TR>
<TR>
  <TD HEIGHT="30"BACKGROUND="http://www.lhweb.com/graphics/p.0.gif"ALIGN="CENTER">
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("p",1)>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("p",0)>
  </TD>
  <TD BACKGROUND="http://www.lhweb.com/graphics/k.0.gif" ALIGN="CENTER">
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("k",1)>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <INPUT TYPE=RADIO NAME=c1 OnClick=flip("k",0)>
  </TD>
</TR>
<TR>
  <TD HEIGHT="30">
  </TD>
  <TD ALIGN="CENTER" BGCOLOR="#000000"><FONT COLOR="WHITE">Left and bottom<BR>should match.
  </TD>
  </TR>
</TABLE>
<P ALIGN="CENTER"><IMG NAME="monitor" SRC="http://www.lhweb.com/graphics/blank.gif" WIDTH="108" HEIGHT="30">
</FORM>
</BODY>
</HTML>

0
 
LVL 6

Expert Comment

by:PBall
ID: 1279982
Sure it does, all you need to do is attach the ID to the TD itself, like this example, change the image.

<html>
<body>
<table cellpadding=2 cellspacing=2 border=1>
<tr>
<td id=cell1 width=300 height=75 background='/images/bimbamma.gif'>Hello, World!
</td>
</tr>
</table>
<form>
<input type=button value='Change 1' onClick='cell1.background="/images/bimbamgr.gif"'>
<input type=button value='Change 2' onClick='cell1.background="/images/bimbamma.gif"'>
</form>
</body>
</html>

a. What do you mean by cached?  Preloaded?

b. Forget netscape, bah.  It turned out that is just a way to describe the CSS in javascript format, not for changing value directly.  I guess netscape can't do this (dynamically change the background of the table cell.  I give up on this one.

if someone can answer how to refer to a certain table part using netscape dom, this might be answerable. bah, netscape just plain sucks (hehe).
0
 

Author Comment

by:aetheros
ID: 1279983
I'm using Explorer and Netscape on a Mac. I like Explorer better, but, get this:
Netscape has consistently finished loading pages three times faster on the net and a whopping six times faster from disk.

Anyway...submit an answer and we're good to go.

thanx
0
 
LVL 6

Accepted Solution

by:
PBall earned 100 total points
ID: 1279984
Claiming point.
0
 

Author Comment

by:aetheros
ID: 1279985
Doh! Came back and answer didn't show. Back to grade momentarily.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question