Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Changing Table Cell Background

Posted on 1999-01-20
8
Medium Priority
?
440 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 300 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

927 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