Solved

Changing Table Cell Background

Posted on 1999-01-20
8
430 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Auto Submit on dropdown box 14 32
Getting AngularJS to work on jsfiddle 7 40
Hovering effect 9 30
Calculate days between two dates 7 38
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now