OnMouseOver -> cellule qui change de couleur? possibel? [CSS] - HTML/CSS - Programmation
Marsh Posté le 19-12-2002 à 14:10:44
<td onmouseover="this.style.backgroundColor='#ff0000';">
idem pour le onmouseout
Marsh Posté le 19-12-2002 à 14:14:24
gm_superstar a écrit : <td onmouseover="this.style.backgroundColor='#ff0000';"> |
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!
Marsh Posté le 19-12-2002 à 14:18:49
si.
td {
background-color: uneCouleur;
}
td:hover {
background-color: uneAutreCouleur;
}
Marsh Posté le 19-12-2002 à 14:25:51
kadreg a écrit : si. |
tester ca de suite
et ca marche avec tous les navigateurs ?
Marsh Posté le 19-12-2002 à 14:35:30
le_duc a écrit : |
td:hover {
background-color: uneAutreCouleur;
}
ou td:over?
Marsh Posté le 19-12-2002 à 14:38:17
:hover
Marsh Posté le 19-12-2002 à 14:40:28
bibkar a écrit : |
marche pas....
la solution à gm_superstar marche, mais c'est un peu embêtant de devoir retaper ca pour chaque cellule...
Marsh Posté le 19-12-2002 à 14:43:59
le_duc a écrit : |
Uniquement sous ce con d'IE qui n'accepte les :hover que sur des liens.
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é.
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.
Marsh Posté le 23-12-2002 à 12:32:22
une question con de newbie (j'en profite pour apprendre)
Code :
|
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 ) ça serait comme ça?
Code :
|
est-ce que c'est possible de faire un truc comme ça?
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)
Marsh Posté le 23-12-2002 à 12:36:11
oh yeah! je viens d'essayer et ça marche...
mais il redevient pas normal quand je ressort?
il faut mettre un onMouseOut, comme vous avez dit au début, non?
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 maintenant j'en sais un petit peu plus
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
Marsh Posté le 19-12-2002 à 14:05:51
c pour un menu...
merci pour l'aide!