Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1310 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modifier le style CSS d'un tableau par rollover

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modifier le style CSS d'un tableau par rollover

n°162219
kalios
Prout !
Posté le 19-06-2002 à 01:35:09  profilanswer
 

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 ?

mood
Publicité
Posté le 19-06-2002 à 01:35:09  profilanswer
 

n°162369
fastclemmy
(re-)Dictateur en plastique
Posté le 19-06-2002 à 11:20:42  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Modifier le style CSS d'un tableau par rollover

 

Sujets relatifs
XML, CSS, les images et les liens[CSS] heritage?
masquer et afficher des cellules de tableau avec les div??[[[HTML]]]Merci de m'aider à insérer une image en fond dans un tableau
recupere la valeur d'un propiete de style avec DOM[HTML, JS] Pb de rollover...
[CSS] Possibilité de deux "décorations" de texte à la fois ?[C++] Need freeware style Winzip
HTML/Javascript : modifier la couleur d'un champ texte... MARCHE!Problème avec un tableau à deux dimensions !
Plus de sujets relatifs à : Modifier le style CSS d'un tableau par rollover

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.093 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR