onmouseout affects onclick event

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • eldin
    New Member
    • May 2007
    • 5
    #1

    onmouseout affects onclick event

    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='#FFFFE 0'

    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='#FFFFE 0'

    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
    Tags: None
    • pbmods
      Recognized Expert Expert
      • Apr 2007
      • 5821
      #2
      Heya, eldin. Welcome to TSDN!

      Try using this.style.back groundColor.

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

      [code=html]
      <tr
      style="backgrou nd-color: #FFFFE0"
      onmouseover="se tBGColor(this, 'F0FAFF');"
      onmouseout="set BGColor(this, 'FFFFE0');"
      onclick="this.o nmouseout=null; setBGColor(this , 'FFFFFF');"
      >
      [/code]

      [code=javascript]
      function setBGColor(elem ent, color) {
      element.style.b ackgroundColor = '#' + color;
      }

      function resetMouseOut(e lement) {
      element.onmouse out = function() {
      setBGColor(elem ent, 'FFFFE0');
      }
      }
      [/code]

      When you click on the row, it will clear the mouseout event handler. You can restore the mouseout handler by calling resetMouseOut.

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032
          #3
          Changed thread title.

            Comment

            • eldin
              New Member
              • May 2007
              • 5
              #4
              ahh it works :D thanks very much

                Comment

                • iam_clint
                  Recognized Expert Top Contributor
                  • Jul 2006
                  • 1207
                  #5
                  probably want to set the on mouse over to null also.

                    Comment

                    • eldin
                      New Member
                      • May 2007
                      • 5
                      #6
                      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

                        Comment

                        • iam_clint
                          Recognized Expert Top Contributor
                          • Jul 2006
                          • 1207
                          #7
                          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.
                          [CODE=javascript]
                          <script>
                          var hoverColor = "#F0FAFF"; // set the color for when the mouse is hovering over the element
                          var defaultColor = "#FFFFE0"; // set the default color of the element when nothing has happened.
                          var clickedColor = "#FFFFFF"; // set the color of the element when it is clicked
                          var hoverColorClick ed = "#F0F0FF" // set the color of the element when the mouse is over and the element has already been clicked.
                          var defcursor = "pointer"; // set the cursor for when the mouse is hovering over the element.

                          window.onload = setRowFunctions ;
                          function setRowFunctions () {
                          rows = document.getEle mentsByTagName( "TR");
                          for (i=0; i<rows.length; i++) {
                          if (rows[i].getAttribute(" hover")=="true" ) {
                          rows[i].onmouseover = function() { this.style.back groundColor = hoverColor; } //set the onmouseover function
                          rows[i].onmouseout = function() { this.style.back groundColor = defaultColor; } //set the onmouseout function
                          rows[i].style.backgrou ndColor = defaultColor; //set the default background color
                          rows[i].style.cursor = defcursor; // set the default cursor
                          rows[i].onclick = function() { handleClick(thi s); } // and finally the onclick event.
                          }
                          }
                          }

                          function handleClick(ele ment) {
                          if (element.getAtt ribute("clicked ")==null || element.getAttr ibute("clicked" )==false) {
                          element.onmouse out = function() { this.style.back groundColor = clickedColor; }
                          element.onmouse over = function() { this.style.back groundColor = hoverColorClick ed }
                          element.style.b ackgroundColor = clickedColor;
                          element.setAttr ibute("clicked" , true);
                          } else {
                          element.setAttr ibute("clicked" , false);
                          element.onmouse over = function() { this.style.back groundColor = hoverColor }
                          element.onmouse out = function() { this.style.back groundColor = defaultColor; }
                          element.style.b ackgroundColor = defaultColor;
                          }
                          }

                          </script>
                          <body bgcolor="black" >
                          <table>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          <tr hover="true"><t d>This is pretty neat!</td><td>Simple Test!</td></tr>
                          </table>
                          [/CODE]

                            Comment

                            • eldin
                              New Member
                              • May 2007
                              • 5
                              #8
                              works great, but i can only select a row only once, but that doenst really matter. thanks a lot for the help :D

                                Comment

                                • tmerkaj
                                  New Member
                                  • Jun 2007
                                  • 6
                                  #9
                                  Originally posted by eldin
                                  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=javasc ript>
                                  var clicked=false;
                                  var mover = "#9e2aa2'";
                                  var mout;
                                  var last;
                                  var savedColor;
                                  </script>
                                  </head>
                                  <body onLoad="last=my table.rows[0];">
                                  <table id="mytable">

                                  <tr bgColor="#fdfbe f" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  <tr bgColor="#e8e5d 7" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  <tr bgColor="#fdfbe f" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  <tr bgColor="#e8e5d 7" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  <tr bgColor="#fdfbe f" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  <tr bgColor="#e8e5d 7" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  <tr bgColor="#fdfbe f" onClick="last.s tyle.background Color=savedColo r; savedColor = this.style.back groundColor; this.style.back groundColor='#9 ecfcf'; last = this;"><td>This is pretty neat!</td><td>Simple Test!</td></tr>
                                  </table>
                                  </body>
                                  </html>

                                    Comment

                                    • siddharth2547
                                      New Member
                                      • Jun 2007
                                      • 1
                                      #10
                                      Can You Please Explain The Above In C#.net

                                        Comment

                                        • iam_clint
                                          Recognized Expert Top Contributor
                                          • Jul 2006
                                          • 1207
                                          #11
                                          Originally posted by siddharth2547
                                          Can You Please Explain The Above In C#.net
                                          no because this is javascript

                                            Comment

                                            Previous template Next
                                            Working...