[CSS] OnMouseOver -> cellule qui change de couleur? possibel?

OnMouseOver -> cellule qui change de couleur? possibel? [CSS] - HTML/CSS - Programmation

Marsh Posté le 19-12-2002 à 14:05:51    

c pour un menu...
 
merci pour l'aide!

Reply

Marsh Posté le 19-12-2002 à 14:05:51   

Reply

Marsh Posté le 19-12-2002 à 14:10:44    

<td onmouseover="this.style.backgroundColor='#ff0000';">
 
idem pour le onmouseout


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-12-2002 à 14:14:24    

gm_superstar a écrit :

<td onmouseover="this.style.backgroundColor='#ff0000';">
 
idem pour le onmouseout


 
et ca marche bien avec tout les navigateur ca ?
 
au fait, j'ai une feuille de style...je peux pas intégrer le "this.style.backgroundColor='#ff0000'" dans la feuille de style? pasque sinon je devrai taper ca pour chaque cellules du menu...
 
merci!

Reply

Marsh Posté le 19-12-2002 à 14:18:49    

si.
 
td {
    background-color: uneCouleur;
}
 
td:hover {
    background-color: uneAutreCouleur;
}


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 19-12-2002 à 14:25:51    

kadreg a écrit :

si.
 
td {
    background-color: uneCouleur;
}
 
td:hover {
    background-color: uneAutreCouleur;
}


 
tester ca de suite  :D  :jap:  
 
et ca marche avec tous les navigateurs ?

Reply

Marsh Posté le 19-12-2002 à 14:31:22    

ca n'a pas l'air de marcher....

Reply

Marsh Posté le 19-12-2002 à 14:35:30    

le_duc a écrit :


 
tester ca de suite  :D  :jap:  
 
et ca marche avec tous les navigateurs ?
 


td:hover {
   background-color: uneAutreCouleur;
}
ou td:over?


---------------
heartbreak ridge
Reply

Marsh Posté le 19-12-2002 à 14:38:17    

:hover


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 19-12-2002 à 14:40:28    

bibkar a écrit :


td:hover {
   background-color: uneAutreCouleur;
}
ou td:over?


 
marche pas....
 
la solution à gm_superstar marche, mais c'est un peu embêtant de devoir retaper ca pour chaque cellule...

Reply

Marsh Posté le 19-12-2002 à 14:43:59    

le_duc a écrit :


marche pas....


 
Uniquement sous ce con d'IE qui n'accepte les :hover que sur des liens.


Message édité par kadreg le 19-12-2002 à 14:44:47

---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 19-12-2002 à 14:43:59   

Reply

Marsh Posté le 19-12-2002 à 15:07:35    

kadreg a écrit :

Uniquement sous ce con d'IE qui n'accepte les :hover que sur des liens.


Je dirais qu'il n'y a que Mozilla qui l'applique à tous les éléments (et pas depuis très longtemps).
 
Les specs ne disent d'ailleur rien de bien précis à ce sujet :
 

Citation :

CSS ne définit pas lesquels des éléments peuvent être dans un de ces états ou comment ceux-ci entrent et sortent de ces états.


 
http://www.yoyodesign.org/doc/w3c/ [...] do-classes
 
Bref IE à tout à fait le droit de ne l'appliquer qu'à l'élément A que Mozilla a le droit de le faire pour tous les autres.
 
Normalement, les CSS 3 lèvent cette ambiguité.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 19-12-2002 à 15:46:55    

le_duc a écrit :

c'est un peu embêtant de devoir retaper ca pour chaque cellule...

lorsqu'une balise reçoit un événement, elle le renvoie à son père, qui le renvoie à son père, etc.
 
td reçoit onmouseover, le balance à tr, qui le balance à table, qui le balance à son père.
 
donc tu peux très bien traiter une seule fois le onmouseover et le mettre dans table. tu regardes le nom de la balise qui reçoit l'événément (event.srcElement), si c'est td ou un des fils (b, i, un paragraphe ...) tu peux changer sa couleur / remonter au premier td.
 
eg
 
<table onmouseover='switchColor()'>
<tr><td> .... etc
 
<script>
   function switchColor()
   {
      var n = event.srcElement;
      // on remonte jusqu'au td
      while (n.tagName != 'TD';) n = n.parentNode;
 
      n.style.backgroundColor = 'red';
   }
</script>
 
par exemple. faire gaffe au event.srcElement, c'est différent sous moz.

Reply

Marsh Posté le 23-12-2002 à 12:32:22    

une question con de newbie (j'en profite pour apprendre) :)  
 

Code :
  1. <td onmouseover="this.style.backgroundColor='#ff0000';">


ce truc de JS, ça marche pour n'importe quel style?
par exemple pour changer de police ou d'alignement, ou de taille (je sais, ça serait très laid  :kaola: ) ça serait comme ça?
 

Code :
  1. <td onmouseover="this.style.fontFamily='verdana';">


 
est-ce que c'est possible de faire un truc comme ça?  :??:  
 

Reply

Marsh Posté le 23-12-2002 à 12:35:30    

Oui toutes les propriétés qui sont dans ce tableau sont modifiables : http://www.mozilla.org/docs/dom/do [...] ml#1002335 (bon c'est une doc de Mozilla, mais IE reconnait la plupart de ces propriétés)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 23-12-2002 à 12:36:11    

oh yeah! je viens d'essayer et ça marche... :pt1cable:  
mais il redevient pas normal quand je ressort?
il faut mettre un onMouseOut, comme vous avez dit au début, non?  :)

Reply

Marsh Posté le 23-12-2002 à 12:40:07    

mais sinon pour les propriétés avec un tiret (background-color)
on enlève le tiret et on met une majuscule, non?
sinon merci à tous ceux qui ont participés à ce topic  :jap: maintenant j'en sais un petit peu plus   :ange:

Reply

Marsh Posté le 23-12-2002 à 12:49:45    

Oui pour remettre la propriété d'origine il faut un onmouseout="this.style.ma_propriete='valeur_initiale';"
 
Pour la syntaxe exacte des propriétés avec un tiret, voir le tableau


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

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