jonnyz0109
asked on
Change Cell Background color OnMouseOver
I need a way to change a cell's background color via a Javascript, called by the onmouseover event. I CANNOT simply change the cell color using the style tag within the TD, because multiple things happen onmouseover:
1) Cell color changes (not SPAN, not DIV, it's got to be the entire CELL)
2) Status message changes to a "tool tip" in bottom of browser (already figured out)
3) The HTML code inside a DIV, SPAN, or CELL (don't remember which) is changed elsewhere on the page (provides a screenshot and some examples of the item that the user is hovering over) (already figured out, I think)
I have a current version of this page that I'm trying to update. I re-coded the backbone of the page so it looks cleaner (and so the code makes more sense to me!) but the cell color changer only works in IE (and is a bit laggy).
Here is all I have for the new javascript so far (I haven't added the HTML code changer yet, but I think I've basically got that working from the 1st version):
<script language = "JavaScript">
<!--
function toolover(name)
{
self.status=name
return true
}
function tooloff()
{
self.status=' '
}
function changebg() <<<DOESN'T WORK>>>
{
'option1'.style.background
}
-->
</script>
A running example of the code that calls this script:
<td width="100%" align="center" style="cursor:pointer;" OnMouseOver="toolover('Alp
So basically here are my questions.
1) For the 'tooltip' in status bar - is there a way to return the message back to whatever it was before? Like, in IE is says "Done" but currently my code just sticks a non-breaking space to clear the tool tip, so whatever was there before is gone for good!
2) Is my code nice and pretty, and as compatible as possible, so far? All of my javascript experience has been cut and paste, this is my first time coding from scratch!
3) How can I get the cell bg in the example above to change? Some thoughts have been to use styles from inside the onmouseover (but can you call more than one thing from onmouseover? i hadn't gotten that to work). Also, css? I have never used css aside from customizing links.
Thanks for any suggestions and help!!
1) Cell color changes (not SPAN, not DIV, it's got to be the entire CELL)
2) Status message changes to a "tool tip" in bottom of browser (already figured out)
3) The HTML code inside a DIV, SPAN, or CELL (don't remember which) is changed elsewhere on the page (provides a screenshot and some examples of the item that the user is hovering over) (already figured out, I think)
I have a current version of this page that I'm trying to update. I re-coded the backbone of the page so it looks cleaner (and so the code makes more sense to me!) but the cell color changer only works in IE (and is a bit laggy).
Here is all I have for the new javascript so far (I haven't added the HTML code changer yet, but I think I've basically got that working from the 1st version):
<script language = "JavaScript">
<!--
function toolover(name)
{
self.status=name
return true
}
function tooloff()
{
self.status=' '
}
function changebg() <<<DOESN'T WORK>>>
{
'option1'.style.background
}
-->
</script>
A running example of the code that calls this script:
<td width="100%" align="center" style="cursor:pointer;" OnMouseOver="toolover('Alp
So basically here are my questions.
1) For the 'tooltip' in status bar - is there a way to return the message back to whatever it was before? Like, in IE is says "Done" but currently my code just sticks a non-breaking space to clear the tool tip, so whatever was there before is gone for good!
2) Is my code nice and pretty, and as compatible as possible, so far? All of my javascript experience has been cut and paste, this is my first time coding from scratch!
3) How can I get the cell bg in the example above to change? Some thoughts have been to use styles from inside the onmouseover (but can you call more than one thing from onmouseover? i hadn't gotten that to work). Also, css? I have never used css aside from customizing links.
Thanks for any suggestions and help!!
this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" style="cursor:pointer;" OnMouseOver="this.style.ba
Alpha & Beta Errors
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" style="cursor:pointer;" OnMouseOver="this.style.ba
Alpha & Beta Errors
</td>
</tr>
</table>
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi jonnyz
try this it solve all you wanted.
<html>
<body>
<script language = "JavaScript">
<!--
function toolover(name,obj)
{
self.defaultStatus = self.status
self.status=name
changebg(obj,'red')
return true
}
function tooloff(obj)
{
self.status = self.defaultStatus
changebg(obj,'blue')
}
function changebg(o,color) {
// o.style.backgroundColor='#
o.style.backgroundColor= color
}
window.status = "some default for checking"
-->
</script>
<table>
<tr>
<td width="100%" align="center" style="cursor:pointer;"
OnMouseOver="toolover('Alp
OnMouseOut="tooloff(this);
</tr>
</table>
</body>
</html>
try this it solve all you wanted.
<html>
<body>
<script language = "JavaScript">
<!--
function toolover(name,obj)
{
self.defaultStatus = self.status
self.status=name
changebg(obj,'red')
return true
}
function tooloff(obj)
{
self.status = self.defaultStatus
changebg(obj,'blue')
}
function changebg(o,color) {
// o.style.backgroundColor='#
o.style.backgroundColor= color
}
window.status = "some default for checking"
-->
</script>
<table>
<tr>
<td width="100%" align="center" style="cursor:pointer;"
OnMouseOver="toolover('Alp
OnMouseOut="tooloff(this);
</tr>
</table>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
if you want to clear a form field onMousOver
do this
OnMouseOver="this.style.ba
do this
OnMouseOver="this.style.ba
looks like this Q is answered :>)
Lot of coding going on for a simple mouse effect:
<html>
<head>
<title> cell changer </title>
<style>
.blue {background-color:blue;col
.green {background-color:green;co
</style>
</head>
<body>
<table>
<tr>
<td id="c1" class="blue" localstatus=""
onMouseover="this.localsta
onMouseout="window.status=
Alpha & Beta Errors
</td>
</tr>
</table>
</body>
</html>
Cd&
<html>
<head>
<title> cell changer </title>
<style>
.blue {background-color:blue;col
.green {background-color:green;co
</style>
</head>
<body>
<table>
<tr>
<td id="c1" class="blue" localstatus=""
onMouseover="this.localsta
onMouseout="window.status=
Alpha & Beta Errors
</td>
</tr>
</table>
</body>
</html>
Cd&
ASKER
Cd the problem with that is I have about 30-40 cells. All that code inside the TD should go into a script above, shouldn't it? Maybe you can make a version of that with the code in a script...
Anyway I have to try this tonight... I'll go for the code that is easiest to manage and is the cleanest, but still works in IE/NS 5+
Thanks everyone!!
Anyway I have to try this tonight... I'll go for the code that is easiest to manage and is the cleanest, but still works in IE/NS 5+
Thanks everyone!!
<td id="c1" class="blue" localstatus=""
onMouseover="doover(this)
onMouseout="doout(this)">
Alpha & Beta Errors
</td>
And in the head the functions:
<script language="JavaScript">
<!--
function doover(EL)
{
EL.localstatus=window.stat
toolover(EL.innerHTML);
EL.className='green';
}
function doout(EL)
{
window.status=EL.localstat
EL.className='blue';
}
//-->
</script>
Cd&
onMouseover="doover(this)
onMouseout="doout(this)">
Alpha & Beta Errors
</td>
And in the head the functions:
<script language="JavaScript">
<!--
function doover(EL)
{
EL.localstatus=window.stat
toolover(EL.innerHTML);
EL.className='green';
}
function doout(EL)
{
window.status=EL.localstat
EL.className='blue';
}
//-->
</script>
Cd&
ASKER
Beautiful! Thanks, I'll try them all tonight!
Hello! Just an additional information .
If it is within a form, you can have it in this way :
document.formname.option1.
You can also have this one :
document.all.option1.style
OR
document.getElementByID('o
Regards!
eNTRANCE2002 :)
If it is within a form, you can have it in this way :
document.formname.option1.
You can also have this one :
document.all.option1.style
OR
document.getElementByID('o
Regards!
eNTRANCE2002 :)
>>>Cd the problem with that is I have about 30-40 cells
In that case use a function.
If the other way, i would say use my shorter way.
Good Luck
In that case use a function.
If the other way, i would say use my shorter way.
Good Luck
also if you want to change the status you need to return true in the mousovers/outs
<td id="c1" class="blue" localstatus=""
onMouseover="return doover(this)"
onMouseout="return doout(this)">
Alpha & Beta Errors
</td>
And in the head the functions:
<script language="JavaScript">
<!--
function doover(EL)
{
EL.localstatus=window.stat
toolover(EL.innerHTML);
EL.className='green';
return true;
}
function doout(EL)
{
window.status=EL.localstat
EL.className='blue';
return true;
}
//-->
</script>
<td id="c1" class="blue" localstatus=""
onMouseover="return doover(this)"
onMouseout="return doout(this)">
Alpha & Beta Errors
</td>
And in the head the functions:
<script language="JavaScript">
<!--
function doover(EL)
{
EL.localstatus=window.stat
toolover(EL.innerHTML);
EL.className='green';
return true;
}
function doout(EL)
{
window.status=EL.localstat
EL.className='blue';
return true;
}
//-->
</script>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
m, the return true's are already in my status scripts... but for the mouseovers I think they are not needed.
As for the compatibility note - I think that is the most anyone here has mentioned about that... I just can't think of a way to make it look nice while using a mouseover with links. Maybe once I have the page working I will post a demo and I can increase points and let everyone have at it on an alternate solution to mouseover with cells... this is the best I could find, and it looks the nicest in my opinion (and since it's my page, that's what really matters!!)
I am just returning now from 2 days at the beach. I was able to get the page working with 3 of the solutions before my last post, but this was only with IE 6. So next I will have to apply the scripts to the actual page and make sure it works in NS6, at the very least. 1 of the 3 scripts was a close duplicate to the other, so it's basically down to 2 solutions that I could come up with.
I'll keep everyone posted. Thanks again for the help.
As for the compatibility note - I think that is the most anyone here has mentioned about that... I just can't think of a way to make it look nice while using a mouseover with links. Maybe once I have the page working I will post a demo and I can increase points and let everyone have at it on an alternate solution to mouseover with cells... this is the best I could find, and it looks the nicest in my opinion (and since it's my page, that's what really matters!!)
I am just returning now from 2 days at the beach. I was able to get the page working with 3 of the solutions before my last post, but this was only with IE 6. So next I will have to apply the scripts to the actual page and make sure it works in NS6, at the very least. 1 of the 3 scripts was a close duplicate to the other, so it's basically down to 2 solutions that I could come up with.
I'll keep everyone posted. Thanks again for the help.
if you return true in the function you need to CALL it with return too unless you REPLACE the event hander:
a:
function a() {
return true
}
.
.
<a href="#" onMouseOver="return a()">
b:
function b() {
return true
}
document.links[x].onmouseo
a:
function a() {
return true
}
.
.
<a href="#" onMouseOver="return a()">
b:
function b() {
return true
}
document.links[x].onmouseo
ASKER
OK Everyone, here is what I found.
smokediver: you are using mouseover with links... I'm staying away from this for now.
jaysolomon: your first post is what I had before and it was not working the way I wanted.
Zvonko: your's worked
cubrovic: pretty much the same thing as Zvonko's so I didn't try it
gamer_2055: your's worked AND you answered my questions.
CD: honestly I couldn't figure out what was going on in your script, so I didn't try that either (after finding 2 others that DID work I wasn't going to go further).
SO - the two that worked will both be getting points at the very least.
If anyone would like to take a stab at an alternate to the way I have my page set up, please see the link below. I'm still working on other parts of the page so the html preview thing doesn't work yet (I should have that working in a few hours.)
http://uhaweb.hartford.edu/zahra/ge/6s_tools/index_new.htm
Thanks!
smokediver: you are using mouseover with links... I'm staying away from this for now.
jaysolomon: your first post is what I had before and it was not working the way I wanted.
Zvonko: your's worked
cubrovic: pretty much the same thing as Zvonko's so I didn't try it
gamer_2055: your's worked AND you answered my questions.
CD: honestly I couldn't figure out what was going on in your script, so I didn't try that either (after finding 2 others that DID work I wasn't going to go further).
SO - the two that worked will both be getting points at the very least.
If anyone would like to take a stab at an alternate to the way I have my page set up, please see the link below. I'm still working on other parts of the page so the html preview thing doesn't work yet (I should have that working in a few hours.)
http://uhaweb.hartford.edu/zahra/ge/6s_tools/index_new.htm
Thanks!
ASKER
mplungjan, not sure what that means. I have the script working as explained in last post...
<script language = "javascript">
<!--
function setStatus(text)
{
self.status = text;
return true;
}
function setBG(theCell,theColor)
{
theCell.style.backgroundCo
}
function toolOver(theCell,text)
{
setStatus(text);
setBG(theCell,'#CAE6CC');
}
function toolOff(theCell)
{
setStatus('');
setBG(theCell,'#FFFFA7');
}
-->
</script>
Called from this:
<td width="100%" align="center" style="cursor:pointer;" onmouseover="toolOver(this
<script language = "javascript">
<!--
function setStatus(text)
{
self.status = text;
return true;
}
function setBG(theCell,theColor)
{
theCell.style.backgroundCo
}
function toolOver(theCell,text)
{
setStatus(text);
setBG(theCell,'#CAE6CC');
}
function toolOff(theCell)
{
setStatus('');
setBG(theCell,'#FFFFA7');
}
-->
</script>
Called from this:
<td width="100%" align="center" style="cursor:pointer;" onmouseover="toolOver(this
A return true in a function is only processed if the function is called thus
someHandlerThatLikesATrue=
or
if one replaces the handler:
somehandlerthatlikesatrue=
that is all.
Since mouseovers of table cells may not need a true (e.g. we handled the default action on mouseover) to handle status texts, the statement in the function is not needed
If they DO need a true then they need to be called
onmouseover="return toolOver(this,'Tool 1');"
someHandlerThatLikesATrue=
or
if one replaces the handler:
somehandlerthatlikesatrue=
that is all.
Since mouseovers of table cells may not need a true (e.g. we handled the default action on mouseover) to handle status texts, the statement in the function is not needed
If they DO need a true then they need to be called
onmouseover="return toolOver(this,'Tool 1');"
sorry mine is not working the way you want it. It works for me
ASKER
Jay: your code is in the <td>'s instead of in a function, and I've got around 40 td's so it would be a pain to put that code into every td.
mplungjan, that makes sense. I'll have to keep that in mind. But basically, if I've got everything working in 3 browsers (IE 6, NS 6, Opera latest version) it's probably scripted right? Also, should I watch out for earlier browsers? Obviously we have already stated that anything before NS6 will not work because it does not support mouseovers with cells.
Thanks everyone.
Again if anyone wants to take a stab at a different method of working the page I'll increase the points... otherwise if there are no comments for that within the next 2 days I will close up the question. (i.e. so the page would work with versions of NS before 6 AND still look and work nicely..)
mplungjan, that makes sense. I'll have to keep that in mind. But basically, if I've got everything working in 3 browsers (IE 6, NS 6, Opera latest version) it's probably scripted right? Also, should I watch out for earlier browsers? Obviously we have already stated that anything before NS6 will not work because it does not support mouseovers with cells.
Thanks everyone.
Again if anyone wants to take a stab at a different method of working the page I'll increase the points... otherwise if there are no comments for that within the next 2 days I will close up the question. (i.e. so the page would work with versions of NS before 6 AND still look and work nicely..)
here is a script i found on my hard drive dunno maybe it will help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var ns6=document.getElementByI
var ie=document.all
function changeto(e,highlightcolor)
source=ie? event.srcElement : e.target
if (source.tagName=="TR"||sou
return
while(source.tagName!="TD"
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundCo
source.style.backgroundCol
}
function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}
function changeback(e,originalcolor
if
(ie&&(event.fromElement.co
return
else if (ns6&&(contains_ns6(source
return
if (ie&&event.toElement!=sour
source.style.backgroundCol
}
//-->
</script>
</head>
<body>
<table width="100%" border="2" cellspacing="0" cellpadding="0" onMouseover="changeto(even
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
var ns6=document.getElementByI
var ie=document.all
function changeto(e,highlightcolor)
source=ie? event.srcElement : e.target
if (source.tagName=="TR"||sou
return
while(source.tagName!="TD"
source=ns6? source.parentNode : source.parentElement
if (source.style.backgroundCo
source.style.backgroundCol
}
function contains_ns6(master, slave) { //check if slave is contained by master
while (slave.parentNode)
if ((slave = slave.parentNode) == master)
return true;
return false;
}
function changeback(e,originalcolor
if
(ie&&(event.fromElement.co
return
else if (ns6&&(contains_ns6(source
return
if (ie&&event.toElement!=sour
source.style.backgroundCol
}
//-->
</script>
</head>
<body>
<table width="100%" border="2" cellspacing="0" cellpadding="0" onMouseover="changeto(even
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
NOTE
i did not write this my self, i cannot really remember where it can from.
i did not write this my self, i cannot really remember where it can from.
ASKER
I'll have to play around with it in spare time (which is not often lately) and see what it does... I'm not advanced enough to be able to look at it and know what it does...
Jonnyz
Jonnyz
hmm here is another one i found
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function cellChange(cell,value)
{
if (value==1)
{
cell.style.cssText = 'background-color: #000000; color: #FFFFFF';
}
if (value==2)
{
cell.style.cssText = 'background-color: #FFFFFF; color: #000000';
}
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td onMouseOver="cellChange(th
</tr>
<tr>
<td onMouseOver="cellChange(th
</tr>
<tr>
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
</tr>
<tr>
<td onMouseOver="cellChange(th
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function cellChange(cell,value)
{
if (value==1)
{
cell.style.cssText = 'background-color: #000000; color: #FFFFFF';
}
if (value==2)
{
cell.style.cssText = 'background-color: #FFFFFF; color: #000000';
}
}
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td onMouseOver="cellChange(th
</tr>
<tr>
<td onMouseOver="cellChange(th
</tr>
<tr>
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
<td onMouseOver="cellChange(th
</tr>
<tr>
<td onMouseOver="cellChange(th
</tr>
</table>
</body>
</html>
I wanna play too ;)
<html>
<head>
<title>Untitled</title>
<style>
.blue { background-color:blue }
.red { background-color:red }
</style>
<script>
cellTexts = new Array(
"cell1","cell2","cell3","c
"cell5","cell6","cell7","c
"cell9","cell10","cell11",
"cell13","cell14","cell15"
"cell17","cell18","cell19"
"cell21","cell22","cell23"
"cell25","cell26","cell27"
"cell29","cell30","cell31"
"cell33","cell34","cell35"
"cell37","cell38","cell39"
)
function over() {
this.className="red"
this.defaultStatus=window.
window.status=cellTexts[th
}
function out() {
this.className="blue"
window.status=this.default
}
function loadPage() {
table=document.getElementB
cnt=0;
for (i=0;i<table.rows.length;i
for (j=0;j<table.rows[i].cells
table.rows[i].cells[j].idx
table.rows[i].cells[j].onm
table.rows[i].cells[j].onm
table.rows[i].cells[j].cla
}
}
}
</script>
</head>
<body onLoad="loadPage()">
<table id="table1">
<tr><td>r1c1</td><td>r1c2<
<tr><td>r2c1</td><td>r2c2<
<tr><td>r3c1</td><td>r3c2<
<tr><td>r4c1</td><td>r4c2<
<tr><td>r5c1</td><td>r5c2<
<tr><td>r6c1</td><td>r6c2<
<tr><td>r7c1</td><td>r7c2<
<tr><td>r8c1</td><td>r8c2<
<tr><td>r9c1</td><td>r9c2<
<tr><td>r10c1</td><td>r10c
</table>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<style>
.blue { background-color:blue }
.red { background-color:red }
</style>
<script>
cellTexts = new Array(
"cell1","cell2","cell3","c
"cell5","cell6","cell7","c
"cell9","cell10","cell11",
"cell13","cell14","cell15"
"cell17","cell18","cell19"
"cell21","cell22","cell23"
"cell25","cell26","cell27"
"cell29","cell30","cell31"
"cell33","cell34","cell35"
"cell37","cell38","cell39"
)
function over() {
this.className="red"
this.defaultStatus=window.
window.status=cellTexts[th
}
function out() {
this.className="blue"
window.status=this.default
}
function loadPage() {
table=document.getElementB
cnt=0;
for (i=0;i<table.rows.length;i
for (j=0;j<table.rows[i].cells
table.rows[i].cells[j].idx
table.rows[i].cells[j].onm
table.rows[i].cells[j].onm
table.rows[i].cells[j].cla
}
}
}
</script>
</head>
<body onLoad="loadPage()">
<table id="table1">
<tr><td>r1c1</td><td>r1c2<
<tr><td>r2c1</td><td>r2c2<
<tr><td>r3c1</td><td>r3c2<
<tr><td>r4c1</td><td>r4c2<
<tr><td>r5c1</td><td>r5c2<
<tr><td>r6c1</td><td>r6c2<
<tr><td>r7c1</td><td>r7c2<
<tr><td>r8c1</td><td>r8c2<
<tr><td>r9c1</td><td>r9c2<
<tr><td>r10c1</td><td>r10c
</table>
</body>
</html>
as much code thats on here, you would think we were fishing for a 500 pointer :>)
No, just for fame and recognition ;)
Mine uses no inline attributes :D
Mine uses no inline attributes :D
O
ASKER
Wow guys I can't believe this. Yeah, only for 100 points... AND I've got things working. Well I will promise, I'll look at everything you have here, just not tonight! :o)
I went into work and I had 10 emails with recommendations on this page... recommendations that include a whole new idea and everything! So I'm making everyone get into a brainstorm and tell me what they want before I go any further on the page!
Jay and M - do your codes play around with what we had before, or does it add more functionality? New Browsers? I have things working with the codes that I specified on an earlier post.. but if yours have more functionality I would be more compelled to look further into those codes...
Jonnyz
I went into work and I had 10 emails with recommendations on this page... recommendations that include a whole new idea and everything! So I'm making everyone get into a brainstorm and tell me what they want before I go any further on the page!
Jay and M - do your codes play around with what we had before, or does it add more functionality? New Browsers? I have things working with the codes that I specified on an earlier post.. but if yours have more functionality I would be more compelled to look further into those codes...
Jonnyz
You wanted to have less code on the cells... My suggestion adds the cell behaviour at load time - cuts down on table size but is more complex to read I guess.
ASKER
Can't believe I didn't take care of this LONG ago! The page still isn't finished - that's what happens when a corporation has a list of things to do and there is only time for a select few to get done!
Anyway points are going to the 2 solutions that worked and answered the original questions. As I didn't have time to even do more than get the page to "work" I haven't played around with all the various options etc, and it seemed like my boss was scaling the page way back, so anything complicated was unnecessary work.
Thanks for everyone's comments, there is a lot of good information here and hopefully it will be useful for others in the future!!
Anyway points are going to the 2 solutions that worked and answered the original questions. As I didn't have time to even do more than get the page to "work" I haven't played around with all the various options etc, and it seemed like my boss was scaling the page way back, so anything complicated was unnecessary work.
Thanks for everyone's comments, there is a lot of good information here and hopefully it will be useful for others in the future!!
<html>
<head>
<title>Test page</title>
<script language="JavaScript">
function setCellColor(id, color)
{
document.all[id].bgColor = color;
}
function cancel()
{
document.testform.field.va
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name=testform>
<table width="75%" border="1">
<tr>
<td colspan=2 id="c1"><a href="http://www.ibm.com/" onmouseover="setCellColor(
</tr>
<tr id="c2">
<td width="32%"><a href="http://www.yahoo.com/" onmouseover="setCellColor(
<td><input name=field type=text>test</input></td
</tr>
<tr>
<td colspan=2> </td>
</tr>
</table>
<input type="button" name="POSubmit" value="Cancel" onclick="cancel();">
</form>
</body>
</html>
Good Luck
Smoke