bgcolor from a 'this'

[@sh]

Trying to do this, but its not working...?! My aim being to change the
bgcolor of the cell upon which the user has rolled over, I'll then replicate
this as an OnMouseOut to change it back.

-----------------------------
<script language="JavaScript">
<!--
function Ash_TopNavRollovers(TheObject); {
TheObject.bgcolor="#000099;";
}
-->
</script>

 

[Daniel Kirsch]

<script language="JavaScript">

use the
type="text/javascript"
attribute instead of the deprecated language attribute.

TheObject.bgcolor="#000099;";

use CSS instead:

TheObject.style.backgroundColor="#000099;";

class="TopNavTextNormal"

Maybe this class defines it's own background-color and changing the HTML
elements bgcolor attribute doesn't have an effect though.

Daniel

 

[Mick White]

Trying to do this, but its not working...?! My aim being to change the
bgcolor of the cell upon which the user has rolled over, I'll then replicate
this as an OnMouseOut to change it back.

-----------------------------
<script language="JavaScript">
<!--
function Ash_TopNavRollovers(TheObject); {
TheObject.bgcolor="#000099;";
}
-->
</script>
-----------------------------

<script type="text/javascript">
function Ash_TopNavRollovers(theObject){
if(theObject && theObject.style){
theObject.style.backgroundColor="#000099";
}
}
</script>

<style type="text/css">
a {display: block;}
</style>

Mick

 

[RobG]

Seeing as 'A' is the *only* element that IE allows CSS 'hover' on (and
even then it must have a href attribute), why not use that? No JS
required at all.

Head:

<style type="text/css">
#special a {
display: block;
}
#special a:hover {
background-color:#000099;
}
#special td {
width: 5em;
text-align: center;
}
</style>


Body:

<table id="special">
<tr>
<td valign="middle"><a href="#">Button Text Here</a></td>
</tr>
</table>
<a href="#">Ordinary A</a>

 

[ASM]

Trying to do this, but its not working...?! My aim being to change the
bgcolor of the cell upon which the user has rolled over, I'll then replicate
this as an OnMouseOut to change it back.

http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_fr.htm
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_cells_fr.htm
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_cells_en.htm

I'm surprise that :

<table width=50% border=1><tr>
<td onmouseover="this.bgColor='yellow'"
onmouseout="this.bgColor='skyblue'">a1</td>
<td onmouseover="this.bgColor='yellow'"
onmouseout="this.bgColor='skyblue'">b1</td>
<td>c1</td></tr>
<tr>
<td onmouseover="this.bgColor='#FFFFCC'"
onmouseout="this.bgColor='#FFCCFF'">a2</td>
<td onmouseover="this.bgColor='#FFFFCC'"
onmouseout="this.bgColor='#FFCCFF'">
b2</td><td>c2</td></tr></table>

don't work for you

(you did notice it is bgColor and not bgcolor )

My Opera won't accept colors like '#FFF' or '#fff'

 

[Randy Webb]

Seeing as 'A' is the *only* element that IE allows CSS 'hover' on (and
even then it must have a href attribute), why not use that? No JS
required at all.

Maybe it's because nobody has answered the original question? The
question was to be able to change the background color of a table cell
that a user mouse's over. The problem lies in the fact that the A tag is
being used when it should be the TD's onmouseover/out that is being
used. If the table cell is wider than the link is, the problem becomes
very apparent

 

[Mick White]

Randy Webb wrote:

[snip]

Maybe it's because nobody has answered the original question? The
question was to be able to change the background color of a table cell
that a user mouse's over.

The original:
"My aim being to change the bgcolor of the cell upon which the user has
rolled over, I'll then replicate this as an OnMouseOut to change it back."

Sounds like he's looking for "hover" to me.
Mick


The problem lies in the fact that the A tag is

 

[ASM]

The original:
"My aim being to change the bgcolor of the cell upon which the user has
rolled over, I'll then replicate this as an OnMouseOut to change it back."

Sounds like he's looking for "hover" to me.

hover sounds like css code to me
while
onMouseOver sounds like JS to me ;-)

the right answer is :

*bgColor* and not *bgcolor*

<script language="JavaScript"><!--
function Ash_TopNavRollovers(TheObject); {
TheObject.bgColor="#000099;";
}
function Ash_TopNavRollouters(TheObject); {
TheObject.bgColor="#FFFFCC;";
}
// --></script>

<table><tr>
<td
onmouseover="Ash_TopNavRollovers(this);"
onmouseout="Ash_TopNavRollouters(this);"> foo </td>
<td
onmouseover="this.bgColor='#000099';"
onmouseout="this.bgColor='#FFFFCC';"> foo </td>
</tr></table>

 

[Randy Webb]

Randy Webb wrote:

[snip]

Maybe it's because nobody has answered the original question? The
question was to be able to change the background color of a table cell
that a user mouse's over.

The original:
"My aim being to change the bgcolor of the cell upon which the user has
rolled over, I'll then replicate this as an OnMouseOut to change it back."

Sounds like he's looking for "hover" to me.

Yes, it does. But the problem with the approach was that the A element
was passing a reference to "this" which points at the A element and not
the TD that contains it. So technically speaking, it was changing the
background of the link and not of the TD. That works fine if the only
child of the TD is the A element, but if there is more in the TD than
the link then it becomes apparent that the A is changing colors and not
the TD.

 

[ASM]

But the problem with the approach was that the A element
was passing a reference to "this" which points at the A element and not
the TD that contains it.

Tremendous ! there was a link ?

so it is :

<script type="text/javascript"><!--
function rol(link){
var c = link.parentNode.bgColor;
link.parentNode.bgColor = c=='#FFFFCC'||c=='#ffffcc'?
'#FFCCFF':'#FFFFCC';
}
// --></script>

<table width=50% border=1><tr>
<td>
<a href="#" onmouseover="rol(this)" onmouseout="rol(this)">a 1</a>
</td><td>
<a href="#" onmouseover="rol(this)" onmouseout="rol(this)">b 1</a>
</td><td>
c 1
</td>
</tr><tr>
<td>
<A HREF="#" onmouseover="this.parentNode.bgColor='#FFFFCC'"
onmouseout="this.parentNode.bgColor='#FFCCFF'">a 2</a>
</td><td>
<a href="#" onmouseover="this.parentNode.bgColor='#FFFFCC'"
onmouseout="this.parentNode.bgColor='#FFCCFF'">b 2</A>
</td><td>
c 2
</td></tr></table>

 

[RobG]

Maybe it's because nobody has answered the original question? The
question was to be able to change the background color of a table cell
that a user mouse's over. The problem lies in the fact that the A tag is
being used when it should be the TD's onmouseover/out that is being
used. If the table cell is wider than the link is, the problem becomes
very apparent

The original question had been kind of answered twice, I figured I'd
toss another approach into the mix. The script indicated that the A
would be used for navigation ( function Ash_TopNavRollovers() ),
hopefully the href would be replaced with some useful link.

If the A is set to block, 100% width and 100% height, it will fill the
TD provided it is the only thing in there (which, in the example, it
was). The OP achieves the result of a link that changes 'onrollover',
is not dependent on JavaScript an is not tempted to further bastardise
the A element with something like href="javascript:...".

Or is that wishful thinking? ;-p

 

[ASM]

If the A is set to block, 100% width and 100% height,

of course it is the best way with a rollover on A (in a td)
(With a lot of advantages, except with NN4, you didn't mention)
and hope @sh (gone away since a long time) understood it

is not tempted to further bastardise
the A element with something like href="javascript:...".

of course too, this batardise would be forbidden

however
solutions answering directly the question can also be given

 

[@sh]

Seeing as 'A' is the *only* element that IE allows CSS 'hover' on (and

even then it must have a href attribute), why not use that? No JS required
at all.

Head:

<style type="text/css">
#special a {
display: block;
}
#special a:hover {
background-color:#000099;
}
#special td {
width: 5em;
text-align: center;
}
</style>

Excellent, thanks for that! I'll never get my head around
Javascript/Stylesheets.

Cheers, @sh

 

[@sh]

Sounds like he's looking for "hover" to me.

Mick

Are there any compatibility implications between using Javascript Hover or
CSS Hover? Is one more widely supported, or presented in an identical way
between browsers when compared to the other?

Cheers, @sh

 

[@sh]

hover sounds like css code to me

while
onMouseOver sounds like JS to me ;-)

the right answer is :

*bgColor* and not *bgcolor*

ARGHHHHHH I hate Javascript, its a frustratingly perfect language to lazy
people like me!

Cheers, @sh

 

[Ivan Marsh]

ARGHHHHHH I hate Javascript, its a frustratingly perfect language to lazy
people like me!

Things that are different aren't the same.