Solved

Changing Table Cell Background

Posted on 1999-01-20
8
437 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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
Course of the Month11 days, 11 hours left to enroll

623 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