473,324 Members | 2,356 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

Changing the Color

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:hand;"
onMouseOver="this.style.background='#c7d0e0';"
onMouseOut="this.style.background='#ffffff';"
onClick="chg_the_color();">
Description
</td>

Any help is appreciated.

Jul 23 '05 #1
13 1827
Ivo
"mike" wrote

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

<td style="cursor:hand;"
onMouseOver="this.style.background='#c7d0e0';"
onMouseOut="this.style.background='#ffffff';"
onClick="chg_the_color();">
Description
</td>


Try:
onclick="this.onmouseout=null;"

hth
--
Ivo
Jul 23 '05 #2
mike wrote on 28 feb 2005 in comp.lang.javascript:
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:hand;"
onMouseOver="this.style.background='#c7d0e0';"
onMouseOut="this.style.background='#ffffff';"
onClick="chg_the_color();">
Description
</td>

Any help is appreciated.


<td
style="cursor:hand;background-color:#ffffff;"
onMouseOver="
this.save='#ffffff';
this.style.backgroundColor='#c7d0e0'"
onMouseOut="this.style.backgroundColor=this.save"
onClick="this.save='#c7d0e0'">
Description
</td>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Jul 23 '05 #3
How do I turn that back on?

Jul 23 '05 #4
mike wrote on 28 feb 2005 in comp.lang.javascript:
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)

Jul 23 '05 #5
Evertjan,

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

<tr id="row1">
style="cursor:hand;background-color:#ffffff;"
onMouseOver="this.save='#ffffff';
this.style.backgroundColor='#c7d0e0'"
onMouseOut="this.style.backgroundColor=this.save"
onClick="this.save='#c7d0e0'">
Description
</td>
</tr>
<tr id="row2">
<td
style="cursor:hand;background-color:#ffffff;"
onMouseOver="this.save='#ffffff';
this.style.backgroundColor='#c7d0e0'"
onMouseOut="this.style.backgroundColor=this.save"
onClick="this.save='#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

Jul 23 '05 #6
mike wrote:

[snip]
<td style="cursor:hand;"
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="this.style.background='#c7d0e0';"
onMouseOut="this.style.background='#ffffff';"
onClick="chg_the_color();">
Description
</td>
var stickyColour = (function(sticky, normal) {
var active = null;

function setBackground(e, c) {
if(e.style) {e.style.backgroundColor = 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(active, 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="stickyColour.change(this);"
onmouseout="stickyColour.restore(this, event);"
onclick="stickyColour.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.
Jul 23 '05 #7
mike wrote on 01 mrt 2005 in comp.lang.javascript:
Evertjan,

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

<tr id="row1">
style="cursor:hand;background-color:#ffffff;"
onMouseOver="this.save='#ffffff';
this.style.backgroundColor='#c7d0e0'"
onMouseOut="this.style.backgroundColor=this.save"
onClick="this.save='#c7d0e0'">
Description
</td>
</tr>
<tr id="row2">
<td
style="cursor:hand;background-color:#ffffff;"
onMouseOver="this.save='#ffffff';
this.style.backgroundColor='#c7d0e0'"
onMouseOut="this.style.backgroundColor=this.save"
onClick="this.save='#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><td
style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this)'
onMouseOut='myOut(this)'
onClick='myClick(this)'>
Description
</td><td
style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this)'
onMouseOut='myOut(this)'
onClick='myClick(this)'>
Description
</td></tr><tr><td
style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this)'
onMouseOut='myOut(this)'
onClick='myClick(this)'>
Description
</td></tr></table>

<script type='text/javascript'>
var myCellSave=false;
function myClick(myThis){
if (myCellSave==myThis){
myCellSave=false
myThis.style.backgroundColor='#ff0000'
return
}
if (myCellSave){
myCellSave.style.backgroundColor='#ffffff'
}
myCellSave=myThis
myThis.style.backgroundColor='#c7d0e0'
}
function myOver(myThis){
if (myCellSave!=myThis){
myThis.style.backgroundColor='#ff0000'
}
}
function myOut(myThis){
if (myCellSave!=myThis){
myThis.style.backgroundColor='#ffffff'
}
}
</script>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Jul 23 '05 #8
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:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_1')'
onMouseOut='myOut(this,'td_1')'
onClick='myClick(this,'td_1')'>
Col 1, Row 1
</td>
</tr>
<tr>
<td style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_1')'
onMouseOut='myOut(this,'td_1')'
onClick='myClick(this,'td_1')'>
Col 1, Row 2
</td>
</tr>
<tr>
<td style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_1')'
onMouseOut='myOut(this,'td_1')'
onClick='myClick(this,'td_1')'>
Col 1, Row 3
</td>
</tr>
</table>
</td>
<td id="td_2">
<table>
<tr>
<td style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_2')'
onMouseOut='myOut(this,'td_2')'
onClick='myClick(this,'td_2')'>
Col 2, Row 1
</td>
</tr>
<tr>
<td style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_2')'
onMouseOut='myOut(this,'td_2')'
onClick='myClick(this,'td_2')'>
Col 2, Row 2
</td>
</tr>
<tr>
<td style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_2')'
onMouseOut='myOut(this,'td_2')'
onClick='myClick(this,'td_2')'>
Col 2, Row 3
</td>
</tr>
</table>
</td>

<script language="JavaScript">
var myCellSave=false;
var myColSave=false;
function myClick(myThis,myCol)
{
alert( "cellsave: " + myCellSave + " " +myThis+" colsave:"+
myColSave+" "+myCol);
if (myCellSave==myThis && myColSave==myCol)
{
myCellSave=false;
myColSave=false;
myThis.style.backgroundColor='#c7d0e0';
return;
}
if (myCellSave && myColSave)
{
myCellSave.style.backgroundColor='#ffffff';
}
myCellSave=myThis;
myColSave=myCol;
myThis.style.backgroundColor='#c7d0e0';
}
function myOver(myThis,myCol)
{
if (myCellSave!=myThis && myColSave!=myCol)
{
myThis.style.backgroundColor='#c7d0e0';
}
}
function myOut(myThis,myCol)
{
if (myCellSave!=myThis && myColSave!=myCol)
{
myThis.style.backgroundColor='#ffffff';
}
}
</script>

Jul 23 '05 #9
mike wrote on 01 mrt 2005 in comp.lang.javascript:
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)

Jul 23 '05 #10
mike napisał(a):
That works great.
<tr>
<td style='cursor:hand;background-color:#ffffff;'
onMouseOver='myOver(this,'td_1')'
onMouseOut='myOut(this,'td_1')'
onClick='myClick(this,'td_1')'>
Col 1, Row 1
</td>
</tr>


How many times are you going to repeat above quoted?
If you have, say, hundreds of cells this will produce lots of
unnecessary kilobytes and make the code hardly readable.
Classes are meant for something and especially useful here.

<style>
..cell {
cursor: pointer; /*cursor:hand is obsolete and IE only */
background:white;
}
</style>

and some tidier coder:
<table id="tbl">
<tr>
<td id="td_1">
<table>
<tr>
<td class="cell td_1">
Col 1, Row 1
</td>
</tr>
<tr>
<td class="cell td_1">
Col 1, Row 2
</td>
</tr>
<tr>
<td class="cell td_1">
Col 1, Row 3
</td>
</tr>
</table>
</td>
<td id="td_2">
<table>
<tr>
<td class="cell td_2">
Col 2, Row 1
</td>
</tr>
<tr>
<td class="cell td_2">
Col 2, Row 1
</td>
</tr>
<tr>
<td class="cell td_2">
Col 2, Row 1
</td>
</tr>
</table>
</td>
<script>
table=document.getElementById("tbl");
mc=table.getElementsByTagName("td");
cur="";
for (i=0;i<mc.length;i++)
if (mc[i].className.match("cell")) {
mc[i].onmouseover=function(){mover(this)};
mc[i].onmouseout=function(){mout(this)};
mc[i].onclick=function(){mclick(this)};
}
function mover(c){
if (c.className!=cur.className) c.style.backgroundColor="blue"
}
function mout(c){
if (c.className!=cur.className) c.style.backgroundColor="white"
}
function mclick(c){
if(cur)cur.style.backgroundColor="white";
c.style.backgroundColor="blue"; cur=c;
}
</script>

--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::
Jul 23 '05 #11
JRS: In article <Xn********************@194.109.133.29>, dated Mon, 28
Feb 2005 22:12:24, seen in news:comp.lang.javascript, Evertjan.
<ex**************@interxnl.net> posted :
mike wrote on 28 feb 2005 in comp.lang.javascript:
How do I turn that back on?


This is NOT email, but usenet.

Quote where you are talking about.


Proper quoting should also be used in E-mail.

IMHO, there's no point at all in telling Google users what to do unless
you also tell them how to do it. See below.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Jul 23 '05 #12
Tomasz Cenian wrote:
[...]
How many times are you going to repeat above quoted?
If you have, say, hundreds of cells this will produce lots of
unnecessary kilobytes and make the code hardly readable.
Classes are meant for something and especially useful here.
Good intentions.

<style>
<style type="text/css">

The type attribute is required.
.cell {
cursor: pointer; /*cursor:hand is obsolete and IE only */
background:white;
}
</style>

and some tidier coder: [...] </tr>
</table>
</td>
But you forgot to close your last row & table.
<script>
<script type="text/javascript:>

The type attribute is required.
table=document.getElementById("tbl");
mc=table.getElementsByTagName("td");
cur="";
Why is everything a global? I understand your use of cur, but
everything else can be local. Why not put all this inside a
function called say 'initTable' and call it with the onload, or
in a script just after the table?

Some testing of gEBI should be done and an alternative provided
for older browsers if that is thought necessary.
for (i=0;i<mc.length;i++)
if (mc[i].className.match("cell")) {
mc[i].onmouseover=function(){mover(this)};
mc[i].onmouseout=function(){mout(this)};
mc[i].onclick=function(){mclick(this)};
These can be attached as:

mc[i].onmouseover = mover;
...

Isn't that tidier?
}
function mover(c){
if (c.className!=cur.className) c.style.backgroundColor="blue"
}


And the functions can be tidier as:

function mover(){
if (this.className != cur.className){
this.style.backgroundColor = 'blue';
}
}

etc.

Here is the full script (tested in IE and Firefox):

<script type="text/javascript">

function mover(){
if (this.className != cur.className){
this.style.backgroundColor = 'blue';
}
}

function mout(){
if (this.className != cur.className){
this.style.backgroundColor = 'white';
}
}

function mclick(){
if(cur){
cur.style.backgroundColor = 'white';
c.style.backgroundColor = 'blue';
cur = c;
}
}

function initTable(tID) {

// No support if gEBI or gEBTN not supported
if (document.getElementById && document.getElementsByTagName){
var t = document.getElementById(tID);
var c = t.getElementsByTagName('td');
} else {
return;
}

cur=''; // global

for (var i=0, cLen=c.length; i<cLen; i++){
if (c[i].className.match('cell')) {
c[i].onmouseover = mover;
c[i].onmouseout = mout;
c[i].onclick = mclick;
}
}
}

initTable('tbl'); // or call from body onload

</script>

--
Rob
Jul 23 '05 #13
RobG napisał(a):

<style type="text/css">

The type attribute is required.
I know that. The HTML part of what I posted was merely an outline, the
purpose of my post was to show js code working so I didn't really bother
with all the necessary atrributes.
</tr>
</table>
</td>
But you forgot to close your last row & table.
[...]
<script type="text/javascript:>

The type attribute is required.


Then again. I simply sketched it quickly and didn't really care. Valid
HTML was obviously not my goal here.

table=document.getElementById("tbl");
mc=table.getElementsByTagName("td");
cur="";

Why is everything a global? I understand your use of cur, but
everything else can be local. Why not put all this inside a
function called say 'initTable' and call it with the onload, or
in a script just after the table?


It's a matter of choice I believe.
for (i=0;i<mc.length;i++)
if (mc[i].className.match("cell")) {
mc[i].onmouseover=function(){mover(this)};
mc[i].onmouseout=function(){mout(this)};
mc[i].onclick=function(){mclick(this)};

These can be attached as:

mc[i].onmouseover = mover;
...

Isn't that tidier?

Sure it is. *Good* point. Don;t know why I used this method to pass "this"

--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::
Jul 23 '05 #14

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: oom | last post by:
I am a bit of a newbie when it comes to python, when working with lists today I noticed some very odd behaviour, any suggestions welcome: Python 2.2.3 (#1, Nov 6 2003, 14:12:38) on linux2...
3
by: Geoff Soper | last post by:
I'm trying to dynamically change the cursor of a couple of maps over an image. Basically the image is in an online photo system where there is a rotate mode. In this mode clicking on the left or...
2
by: Urs Vogel | last post by:
Hi When using XmlDocument, I can create nodes and attributes as I like. What I didn't achieve is changing the Value of a node (created with createElement), it claims that it's the wrong node...
6
by: Eric | last post by:
I have an array, result. I populate the array and add it to an ArrayList. I then change result and add the new version to the ArrayList. However, when I go to review the ArrayList, all of the...
10
by: Altman | last post by:
I have only done a little programming in C++ so I am still learning but I am having a problem with a variable that is changing on me. I have tried this 2 ways with the same result. I have a...
1
by: Pablo | last post by:
I do not know like changing the color of bottom of: a menu, of the bar of the title of form, messagebox?
32
by: deko | last post by:
I have a popup form with a textbox that is bound to a memo field. I've been warned about memo fields so I'm wondering if I should use this code. Is there any risk with changing the form's...
12
by: GaryDean | last post by:
In the original post I failed so indicate that I am using framework 1.1....... I need to be able to change the background color of a page from code. I found an answer to this question in...
2
by: Jim Frazer | last post by:
Hi, I'm working on an application in C# that will allow the user to create simple CAD drawings on a CEPC system. I would like to be able to change the cursor shape depending on the drawing mode...
4
by: andychambers2002 | last post by:
I'm working on a "TempFile" class that stores the data in memory until it gets larger than a specified threshold (as per PEP 42). Whilst trying to implement it, I've come across some strange...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.