473,383 Members | 1,829 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,383 software developers and data experts.

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

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

Similar topics

2
by: Andreas Knollmann | last post by:
Hi, I create an object like this: var cell = document.createElement("td"). It doesn't have to be cell. I want this cell to use the onclick event. What doesn't work in the IE as well as with...
17
by: Mike Gratee | last post by:
Is it possible to use JavaScript to cause the browser to click a link on a page and have the browser act exactly like the user had clicked on the link directly? In other words, I need to...
17
by: abs | last post by:
My element: <span onclick="alert('test')" id="mySpan">test</span> Let's say that I don't know what is in this span's onclick event. Is it possible to add another action to this element's onclick...
5
by: moondaddy | last post by:
I have a <a> element in a datagrid which wraps some asp.net labels. this element also has an onclick event which does not fire in netscape 6 (and perhaps other browsers for all I know...). Below...
2
by: karunakar | last post by:
Hi All In datagrid OnMouseOver iam showing some color Onmouseout also working fine . Here my problem is when ever click the pariculat row in DataGrid iam showing red color that time i am not...
5
by: Stuart Shay | last post by:
Hello All I am working on ASP.NET 1.1 Custom Pager that allows a User to Enter a Number in a TextBox and go to the page selected. Since the OnClick Event does not work in ASP.NET 1.1 for a...
7
by: prash.marne | last post by:
Hello, I have a simple form <form method="POST"> <select name="activity"> <option value="0">None</option> <option value="M" onclick="popup_onclick()">Select Multiple</option> <option...
3
by: Michael_R_Banks | last post by:
I'm trying to dynamically build a table that allows users to remove rows when they click a corresponding button. For some reason, whenever I add the button to the table, it never fires the onclick...
6
by: Nathan Sokalski | last post by:
I have a DataList which contains several LinkButtons, which are used to select a category in my application. I want the currently selected category to use a different CSS class. Here is an example...
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...
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...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.