Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Changing Table Cell Background

Posted on 1999-01-20
8
Medium Priority
?
439 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

730 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