By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,760 Members | 1,557 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,760 IT Pros & Developers. It's quick & easy.

bgcolor from a 'this'

P: n/a
@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>
-----------------------------

AND IN THE BODY...

-----------------------------
<td width="91" align="center" valign="middle"><a href="#"
class="TopNavTextNormal" OnMouseover="Ash_TopNavRollovers(this);">Button
Text Here</a></td>
-----------------------------

Appreciate your help!
Jul 23 '05 #1
Share this Question
Share on Google+
15 Replies


P: n/a
@sh wrote:
<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
Jul 23 '05 #2

P: n/a
@sh wrote:
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

AND IN THE BODY...

-----------------------------
<td width="91" align="center" valign="middle"><a href="#"
class="TopNavTextNormal" OnMouseover="Ash_TopNavRollovers(this);">Button
Text Here</a></td>
-----------------------------

Appreciate your help!

Jul 23 '05 #3

P: n/a
Mick White wrote:
@sh wrote:
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>
-----------------------------


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>

--
Rob
Jul 23 '05 #4

P: n/a
ASM
@sh wrote:
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.mor...ht_rows_fr.htm
http://perso.wanadoo.fr/stephane.mor...t_cells_fr.htm
http://perso.wanadoo.fr/stephane.mor...t_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'
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #5

P: n/a
RobG wrote:
Mick White wrote:
@sh wrote:
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>
-----------------------------

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 :)
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #6

P: n/a
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 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 :)

Jul 23 '05 #7

P: n/a
ASM
Mick White wrote:
Randy Webb wrote:
Maybe it's because nobody has answered the original question?


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>

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #8

P: n/a
Mick White wrote:
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #9

P: n/a
ASM
Randy Webb wrote:
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>
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #10

P: n/a
Randy Webb wrote:
RobG wrote:
Mick White wrote:
@sh wrote:

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


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 :)


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

--
Rob
Jul 23 '05 #11

P: n/a
ASM
RobG wrote:
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
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #12

P: n/a
@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
Jul 23 '05 #13

P: n/a
@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
Jul 23 '05 #14

P: n/a
@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
Jul 23 '05 #15

P: n/a
On Tue, 12 Jul 2005 15:47:29 +0000, @sh wrote:
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!


Things that are different aren't the same.

--
"Blessed is he who expects nothing, for he shall never be disappointed."
Benjamin Franklin (I didn't know he was a Buddhist)

Jul 23 '05 #16

This discussion thread is closed

Replies have been disabled for this discussion.