Javascript rollover -


i'm stuck following challenge:

  • my table has basic (static) alternating color scheme even/odd rows, containing different options (class).
  • in addition javascript should provide for:
    1. a rollover effect show row pointed @ cursor (onmouseover, onmouseout)
    2. a specific color row contains option selected mouse click (onclick).

i came following code:

<html> <head>  <style type="text/css"> tr.modulerow-odd {     background-color            : #ff0000; }  tr.modulerow-even {     background-color            : #00ff00; }  .modulerowover-odd, .modulerowover-even {     background-color            : #d7e9f7; }  .modulerowselected-even, .modulerowselected-odd {     background-color            : #0000ff;  } </style>  <script type="text/javascript"><!-- var selected;  function selectroweffect(object, buttonselect) {   if (!selected) {     if (document.getelementbyid) {       selected = document.getelementbyid('defaultselected');     } else {       selected = document.all['defaultselected'];     }   }  if (selected) {  if (selected.classname == 'modulerow-even' || selected.classname == 'modulerowselected-even') { selected.classname = 'modulerow-even'; object.classname = 'modulerowselected-even'; }  if (selected.classname == 'modulerow-odd' || selected.classname == 'modulerowselected-odd') { selected.classname = 'modulerow-odd'; object.classname = 'modulerowselected-odd'; }  } //selected.classname = 'modulerow'; //object.classname = 'modulerowselected'; selected = object;  // 1 button not array   if (document.checkout_payment.payment[0]) {     document.checkout_payment.payment[buttonselect].checked=true;   } else {     document.checkout_payment.payment.checked=true;   } }  function rowovereffect_1(object) {   if (object.classname == 'modulerow-odd') object.classname = 'modulerowover-odd'; }  function rowovereffect_2(object) {   if (object.classname == 'modulerow-even') object.classname = 'modulerowover-even'; }  function rowouteffect_1(object) {   if (object.classname == 'modulerowover-odd') object.classname = 'modulerow-odd'; }  function rowouteffect_2(object) {   if (object.classname == 'modulerowover-even') object.classname = 'modulerow-even'; }  //--></script>  </head> <body>  <table> <tr class="modulerow-odd" onmouseover="rowovereffect_1(this)" onmouseout="rowouteffect_1(this)" onclick="selectroweffect(this, 0)">    <td>option 1 - row-odd</td>    <td><input type="radio" name="payment" value="option 1" /></td> </tr> <tr class="modulerow-even" onmouseover="rowovereffect_2(this)" onmouseout="rowouteffect_2(this)" onclick="selectroweffect(this, 1)">   <td>option 2 - row-even</td>   <td><input type="radio" name="payment" value="option 2" /></td> </tr> </table>  </body> </html>

when testing, after clicking few times on options, loose alternating static background (odd/even rows same color) , part of rollover.

any appreciated.

kind regards,

dennis

i modified selectroweffect function in order fix logic problem

as can see, need check if selected row or not , revert class should (unselect it).

and then, can change clicked row's class corresponding selected one. note used ? : ternary operator tests condition before ? , if true returns part between ? , : otherwise returns part after :. returned value affected object's classname.

here fiddle see in action.

function selectroweffect(object, buttonselect) {     if (!selected) {         if (document.getelementbyid) {             selected = document.getelementbyid('defaultselected');         } else {             selected = document.all['defaultselected'];         }     }      if (selected) {         if (selected.classname == 'modulerowselected-even') {             selected.classname = 'modulerow-even';         }          if (selected.classname == 'modulerowselected-odd') {             selected.classname = 'modulerow-odd';         }     }      object.classname = buttonselect == 1 ? "modulerowselected-even" : "modulerowselected-odd";      selected = object;      // 1 button not array     if (document.checkout_payment.payment[0]) {         document.checkout_payment.payment[buttonselect].checked=true;     } else {         document.checkout_payment.payment.checked=true;     } }

Comments

Post a Comment