Modifier le style CSS d'un tableau par rollover

Modifier le style CSS d'un tableau par rollover - HTML/CSS - Programmation

Marsh Posté le 19-06-2002 à 01:35:09    

J'utilise dans un menu des cellules d'un tableau comme bouton.  
 
Je modifie le style du bouton directement aux évenements OnMouse
de cette manière : this.className='button_up'
 
ceci fonctionne parfaitement pour modifier le style de la cellule sur laquel la souris se trouve.
 
Mon problème réside dans le fait que je souhaite modifier tout la ligne de cellules en même temps comment puis-je faire ?
 
Je ne peux malheureusement pas modifier le style de la balise <TR> mais seulement celui de la balise de cellule <TD> pour que mon effet de style fonctionne.
 
Avez-vous une solution ?

Reply

Marsh Posté le 19-06-2002 à 01:35:09   

Reply

Marsh Posté le 19-06-2002 à 11:20:42    

Ils font ça dans la dernière version de PHPMyAdmin :
 

Code :
  1. <tr onmouseover="setPointer(this, 'over', '#DDDDDD', '#CCFFCC', '#FFCC99')" onmouseout="setPointer(this, 'out', '#DDDDDD', '#CCFFCC', '#FFCC99')" onmousedown="setPointer(this, 'click', '#DDDDDD', '#CCFFCC', '#FFCC99')">


 

Code :
  1. function setPointer(theRow, theAction, theDefaultColor, thePointerColor, theMarkColor)
  2. {
  3.     var theCells = null;
  5.     // 1. Pointer and mark feature are disabled or the browser can't get the
  6.     //    row -> exits
  7.     if ((thePointerColor == '' && theMarkColor == '')
  8.         || typeof(theRow.style) == 'undefined') {
  9.         return false;
  10.     }
  12.     // 2. Gets the current row and exits if the browser can't get it
  13.     if (typeof(document.getElementsByTagName) != 'undefined') {
  14.         theCells = theRow.getElementsByTagName('td');
  15.     }
  16.     else if (typeof(theRow.cells) != 'undefined') {
  17.         theCells = theRow.cells;
  18.     }
  19.     else {
  20.         return false;
  21.     }
  23.     // 3. Gets the current color...
  24.     var rowCellsCnt  = theCells.length;
  25.     var domDetect    = null;
  26.     var currentColor = null;
  27.     var newColor     = null;
  28.     // 3.1 ... with DOM compatible browsers except Opera that does not return
  29.     //         valid values with "getAttribute"
  30.     if (typeof(window.opera) == 'undefined'
  31.         && typeof(theCells[0].getAttribute) != 'undefined') {
  32.         currentColor = theCells[0].getAttribute('bgcolor');
  33.         domDetect    = true;
  34.     }
  35.     // 3.2 ... with other browsers
  36.     else {
  37.         currentColor = theCells[0].style.backgroundColor;
  38.         domDetect    = false;
  39.     } // end 3
  41.     // 4. Defines the new color
  42.     // 4.1 Current color is the default one
  43.     if (currentColor == ''
  44.         || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
  45.         if (theAction == 'over' && thePointerColor != '') {
  46.             newColor = thePointerColor;
  47.         }
  48.         else if (theAction == 'click' && theMarkColor != '') {
  49.             newColor = theMarkColor;
  50.         }
  51.     }
  52.     // 4.1.2 Current color is the pointer one
  53.     else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()) {
  54.         if (theAction == 'out') {
  55.             newColor = theDefaultColor;
  56.         }
  57.         else if (theAction == 'click' && theMarkColor != '') {
  58.             newColor = theMarkColor;
  59.         }
  60.     }
  61.     // 4.1.3 Current color is the marker one
  62.     else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
  63.         if (theAction == 'click') {
  64.             newColor = (thePointerColor != '')
  65.                      ? thePointerColor
  66.                      : theDefaultColor;
  67.         }
  68.     } // end 4
  70.     // 5. Sets the new color...
  71.     if (newColor) {
  72.         var c = null;
  73.         // 5.1 ... with DOM compatible browsers except Opera
  74.         if (domDetect) {
  75.             for (c = 0; c < rowCellsCnt; c++) {
  76.                 theCells[c].setAttribute('bgcolor', newColor, 0);
  77.             } // end for
  78.         }
  79.         // 5.2 ... with other browsers
  80.         else {
  81.             for (c = 0; c < rowCellsCnt; c++) {
  82.                 theCells[c].style.backgroundColor = newColor;
  83.             }
  84.         }
  85.     } // end 5
  87.     return true;
  88. } // end of the 'setPointer()' function

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed