Changing the Color

[mike]

I have some elements that I want to change color when I mouse over them
and them back on mouse off.

I'd like the color to remain with "#c7d0e0" when the user clicks on
them.

<td style="cursor:h and;"
onMouseOver="th is.style.backgr ound='#c7d0e0'; "
onMouseOut="thi s.style.backgro und='#ffffff';"
onClick="chg_th e_color();">
Description
</td>

Any help is appreciated.

[Ivo]

"mike" wrote

I'd like the color to remain with "#c7d0e0" when the user clicks on
them.

<td style="cursor:h and;"
onMouseOver="th is.style.backgr ound='#c7d0e0'; "
onMouseOut="thi s.style.backgro und='#ffffff';"
onClick="chg_th e_color();">
Description
</td>

Try:
onclick="this.o nmouseout=null; "

hth
--
Ivo

[Evertjan.]

mike wrote on 28 feb 2005 in comp.lang.javas cript:

I have some elements that I want to change color when I mouse over them
and them back on mouse off.

I'd like the color to remain with "#c7d0e0" when the user clicks on
them.

<td style="cursor:h and;"
onMouseOver="th is.style.backgr ound='#c7d0e0'; "
onMouseOut="thi s.style.backgro und='#ffffff';"
onClick="chg_th e_color();">
Description
</td>

Any help is appreciated.

<td
style="cursor:h and;background-color:#ffffff;"
onMouseOver="
this.save='#fff fff';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

How do I turn that back on?

[Evertjan.]

mike wrote on 28 feb 2005 in comp.lang.javas cript:

How do I turn that back on?

This is NOT email, but usenet.

Quote where you are talking about.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

Evertjan,

Good stuff. Works great.Only thing is I have many of these like:

<tr id="row1">
style="cursor:h and;background-color:#ffffff;"
onMouseOver="th is.save='#fffff f';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
</tr>
<tr id="row2">
<td
style="cursor:h and;background-color:#ffffff;"
onMouseOver="th is.save='#fffff f';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
</tr>

and when I click on "row1" then of course it keeps the background
color.
when I click on "row2" it keeps the background color as well.
I'd like to turn off "row1".

Thanks for your help, Mike

[Michael Winter]

mike wrote:

[snip]

<td style="cursor:h and;"
The value, hand, is invalid for the cursor property. You're looking
for 'pointer':

cursor: pointer;

Rather than setting this property via an inline style attribute, use a
sensible selector and set the value in a global style sheet.
onMouseOver="th is.style.backgr ound='#c7d0e0'; "
onMouseOut="thi s.style.backgro und='#ffffff';"
onClick="chg_th e_color();">
Description
</td>
var stickyColour = (function(stick y, normal) {
var active = null;

function setBackground(e , c) {
if(e.style) {e.style.backgr oundColor = c;}
}

return {
change : function(o) {
/* If the element, o, isn't the currently active
* element, set its background colour. This check
* isn't strictly necessary, but it does prevent
* unnecessary style changes.
*/
if(o != active) {setBackground( o, sticky);}
},
persist : function(o) {
/* If there is already an active element and that
* element isn't o, restore it's background colour.
*/
if(active && (o != active)) {
setBackground(a ctive, normal);
}
/* Save a reference to the new active element. */
active = o;
},
restore : function(o, e) {
/* If the element, o, isn't active but it is the
* target of the event, e, restore its background
* colour. This prevents bubbling events from
* triggering this code.
*/
if((o != active) && (o == (e.target || e.srcElement))) {
setBackground(o , normal);
}
}
};
})('#c7d0e0', '#ffffff');

<td onmouseover="st ickyColour.chan ge(this);"
onmouseout="sti ckyColour.resto re(this, event);"
onclick="sticky Colour.persist( this);"Description</td>

Feel free to shorten the object (stickyColour) and method identifiers.

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Evertjan.]

mike wrote on 01 mrt 2005 in comp.lang.javas cript:

Evertjan,

Good stuff. Works great.Only thing is I have many of these like:

<tr id="row1">
style="cursor:h and;background-color:#ffffff;"
onMouseOver="th is.save='#fffff f';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
</tr>
<tr id="row2">
<td
style="cursor:h and;background-color:#ffffff;"
onMouseOver="th is.save='#fffff f';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
</tr>

and when I click on "row1" then of course it keeps the background
color.
when I click on "row2" it keeps the background color as well.
I'd like to turn off "row1".
[please always quote relevant parts. this is not email, but usenet.
others want to follow the conversation and news servers are not always
obliging]
I'd like to turn off "row1".

I thought we were talking about individual cells

Try this:

<table><tr><t d
style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this)'
onMouseOut='myO ut(this)'
onClick='myClic k(this)'>
Description
</td><td
style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this)'
onMouseOut='myO ut(this)'
onClick='myClic k(this)'>
Description
</td></tr><tr><td
style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this)'
onMouseOut='myO ut(this)'
onClick='myClic k(this)'>
Description
</td></tr></table>

<script type='text/javascript'>
var myCellSave=fals e;
function myClick(myThis) {
if (myCellSave==my This){
myCellSave=fals e
myThis.style.ba ckgroundColor=' #ff0000'
return
}
if (myCellSave){
myCellSave.styl e.backgroundCol or='#ffffff'
}
myCellSave=myTh is
myThis.style.ba ckgroundColor=' #c7d0e0'
}
function myOver(myThis){
if (myCellSave!=my This){
myThis.style.ba ckgroundColor=' #ff0000'
}
}
function myOut(myThis){
if (myCellSave!=my This){
myThis.style.ba ckgroundColor=' #ffffff'
}
}
</script>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

That works great. I am now trying to add some other columns to that
functionality. I'd like the first column to stay highlited when I go to
the next column I tried this, but it does not isolate the column. Still
working on it. Any suggestions?

<td id="td_1">
<table>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_1 ')'
onMouseOut='myO ut(this,'td_1') '
onClick='myClic k(this,'td_1')' >
Col 1, Row 1
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_1 ')'
onMouseOut='myO ut(this,'td_1') '
onClick='myClic k(this,'td_1')' >
Col 1, Row 2
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_1 ')'
onMouseOut='myO ut(this,'td_1') '
onClick='myClic k(this,'td_1')' >
Col 1, Row 3
</td>
</tr>
</table>
</td>
<td id="td_2">
<table>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_2 ')'
onMouseOut='myO ut(this,'td_2') '
onClick='myClic k(this,'td_2')' >
Col 2, Row 1
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_2 ')'
onMouseOut='myO ut(this,'td_2') '
onClick='myClic k(this,'td_2')' >
Col 2, Row 2
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_2 ')'
onMouseOut='myO ut(this,'td_2') '
onClick='myClic k(this,'td_2')' >
Col 2, Row 3
</td>
</tr>
</table>
</td>

<script language="JavaS cript">
var myCellSave=fals e;
var myColSave=false ;
function myClick(myThis, myCol)
{
alert( "cellsave: " + myCellSave + " " +myThis+" colsave:"+
myColSave+" "+myCol);
if (myCellSave==my This && myColSave==myCo l)
{
myCellSave=fals e;
myColSave=false ;
myThis.style.ba ckgroundColor=' #c7d0e0';
return;
}
if (myCellSave && myColSave)
{
myCellSave.styl e.backgroundCol or='#ffffff';
}
myCellSave=myTh is;
myColSave=myCol ;
myThis.style.ba ckgroundColor=' #c7d0e0';
}
function myOver(myThis,m yCol)
{
if (myCellSave!=my This && myColSave!=myCo l)
{
myThis.style.ba ckgroundColor=' #c7d0e0';
}
}
function myOut(myThis,my Col)
{
if (myCellSave!=my This && myColSave!=myCo l)
{
myThis.style.ba ckgroundColor=' #ffffff';
}
}
</script>

[Evertjan.]

mike wrote on 01 mrt 2005 in comp.lang.javas cript:

That works great. I am now trying to add some other columns to that
functionality. I'd like the first column to stay highlited when I go to
the next column I tried this, but it does not isolate the column. Still
working on it. Any suggestions?

I leave you to it. The principles being layed out, it must be possible to
programme your own requirements.

You could give the first column cells a seperate className?

Do not make those long sequences but start programming in modules you can
test independently.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)