469,322 Members | 1,059 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,322 developers. It's quick & easy.

onmouseout affects onclick event

5
Hello,

Im new to Javascript, and I've got a problem. I have a table, and if i move my mouse over a row, i want it to turn into another color. for that i use:

<TR bgColor='#FFFFE0'

onmouseover ="this.bgColor='#F0FAFF'"
onMouseout ="this.bgColor='#FFFFE0'">.

That works fine, but now i want to be able to click on a row, to make it another color. But when I use:

<TR bgColor='#FFFFE0'

onmouseover ="this.bgColor='#F0FAFF'"
onMouseout ="this.bgColor='#FFFFE0'"
onclick ="this.bgColor='#FFFFFF'">

it turns back to the normal color when i move my mouse out of the row, because of the onMouseout.

Can someone tell me how to solve this please?

thanks
May 23 '07 #1
10 3471
pbmods
5,821 Expert 4TB
Heya, eldin. Welcome to TSDN!

Try using this.style.backgroundColor.

[EDIT: That won't solve your problem. Let's try this again...]

From what you've posted here, what I would probably do is is:

Expand|Select|Wrap|Line Numbers
  1. <tr
  2.     style="background-color: #FFFFE0"
  3.     onmouseover="setBGColor(this, 'F0FAFF');"
  4.     onmouseout="setBGColor(this, 'FFFFE0');"
  5.     onclick="this.onmouseout=null; setBGColor(this, 'FFFFFF');"
  6. >
  7.  
Expand|Select|Wrap|Line Numbers
  1. function setBGColor(element, color) {
  2.     element.style.backgroundColor = '#' + color;
  3. }
  4.  
  5. function resetMouseOut(element) {
  6.     element.onmouseout = function() {
  7.         setBGColor(element, 'FFFFE0');
  8.     }
  9. }
  10.  
When you click on the row, it will clear the mouseout event handler. You can restore the mouseout handler by calling resetMouseOut.
May 23 '07 #2
acoder
16,027 Expert Mod 8TB
Changed thread title.
May 24 '07 #3
eldin
5
ahh it works :D thanks very much
May 24 '07 #4
iam_clint
1,208 Expert 1GB
probably want to set the on mouse over to null also.
May 24 '07 #5
eldin
5
Indeed :P

new question:

I want to be able to click the color off again, so i tried some things with variables and the IF/ELSE function, (in combo with resetMouseOut)
But it didnt worked.. Can someone please explain how to do this?

thanks in advance
May 25 '07 #6
iam_clint
1,208 Expert 1GB
since you've already attempted doing this i'll give you an example of how i would do it and make it modular. (will work on any page)

in your table rows take off all your onmouseovers and styles and just put hover=true this script checks for that and dynamicly adds the functions. this make it look much cleaner.
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var hoverColor = "#F0FAFF"; // set the color for when the mouse is hovering over the element
  3. var defaultColor = "#FFFFE0"; // set the default color of the element when nothing has happened.
  4. var clickedColor = "#FFFFFF"; // set the color of the element when it is clicked
  5. var hoverColorClicked = "#F0F0FF" // set the color of the element when the mouse is over and the element has already been clicked.
  6. var defcursor = "pointer"; // set the cursor for when the mouse is hovering over the element.
  7.  
  8. window.onload = setRowFunctions;
  9. function setRowFunctions() {
  10.     rows = document.getElementsByTagName("TR");
  11.     for (i=0; i<rows.length; i++) {
  12.         if (rows[i].getAttribute("hover")=="true") {
  13.             rows[i].onmouseover = function() { this.style.backgroundColor = hoverColor; } //set the onmouseover function
  14.             rows[i].onmouseout = function() { this.style.backgroundColor = defaultColor; }  //set the onmouseout function
  15.             rows[i].style.backgroundColor = defaultColor; //set the default background color
  16.             rows[i].style.cursor = defcursor; // set the default cursor
  17.             rows[i].onclick = function() { handleClick(this); } // and finally the onclick event.
  18.         }
  19.     }
  20. }
  21.  
  22. function handleClick(element) {
  23.     if (element.getAttribute("clicked")==null || element.getAttribute("clicked")==false) {
  24.     element.onmouseout = function() { this.style.backgroundColor = clickedColor; }
  25.     element.onmouseover = function() { this.style.backgroundColor = hoverColorClicked }
  26.     element.style.backgroundColor = clickedColor;
  27.     element.setAttribute("clicked", true);
  28.     } else {
  29.     element.setAttribute("clicked", false);
  30.     element.onmouseover = function() { this.style.backgroundColor = hoverColor }
  31.     element.onmouseout = function() { this.style.backgroundColor = defaultColor; }
  32.     element.style.backgroundColor = defaultColor;
  33.     }
  34. }
  35.  
  36. </script>
  37. <body bgcolor="black">
  38. <table>
  39. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  40. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  41. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  42. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  43. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  44. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  45. <tr hover="true"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
  46. </table>
  47.  
May 25 '07 #7
eldin
5
works great, but i can only select a row only once, but that doenst really matter. thanks a lot for the help :D
May 30 '07 #8
works great, but i can only select a row only once, but that doenst really matter. thanks a lot for the help :D
try this

<HTML><HEAD>
<script language=javascript>
var clicked=false;
var mover = "#9e2aa2'";
var mout;
var last;
var savedColor;
</script>
</head>
<body onLoad="last=mytable.rows[0];">
<table id="mytable">

<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#e8e5d7" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#e8e5d7" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#e8e5d7" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
<tr bgColor="#fdfbef" onClick="last.style.backgroundColor=savedColor; savedColor = this.style.backgroundColor; this.style.backgroundColor='#9ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
</table>
</body>
</html>
Jun 5 '07 #9
Can You Please Explain The Above In C#.net
Jun 8 '07 #10
iam_clint
1,208 Expert 1GB
Can You Please Explain The Above In C#.net
no because this is javascript
Jun 8 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Andreas Knollmann | last post: by
17 posts views Thread by Mike Gratee | last post: by
5 posts views Thread by moondaddy | last post: by
5 posts views Thread by Stuart Shay | last post: by
3 posts views Thread by Michael_R_Banks | last post: by
6 posts views Thread by Nathan Sokalski | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Gurmeet2796 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.