Comment changer la couleur d'1 cellule d'un tableau avec onMouseOver? - HTML/CSS - Programmation
Marsh Posté le 08-07-2002 à 09:21:55
le plus simple c'est de mettre un identifiant sur ta celllule:
<td id="macellule" style="bacground-color:macouleurdedépart;">...
Tiens d'ailleur j'y pense sous Netscape je crois que l'evenement onmouseover ne marche pas sur une cellule (il faudra faire un lien)
bref
onmouseover="document?getElementById("mavellule" ).style.color='monautrecoulur';"
Marsh Posté le 08-07-2002 à 10:41:32
gm_superstar a écrit a écrit : td:hover { background-color: #ff0000; } |
je voudrais bien voir un rapport de compatibilité de browsers à ce sujet...
(et d'abord, c'est dans la norme ça??)
edit: d'ailleurs ça marche pas dans IE6, je sais pas pourquoi mais je m'en doutais.
Marsh Posté le 08-07-2002 à 10:49:25
--greg-- a écrit a écrit : je voudrais bien voir un rapport de compatibilité de browsers à ce sujet... |
Ça ne marche pas avec IE.
Citation : (et d'abord, c'est dans la norme ça??) |
Oui.
Marsh Posté le 08-07-2002 à 10:54:08
gm_superstar a écrit a écrit : Ça ne marche pas avec IE.
|
et ça va marche avec...?
tiens oui ça marche avec mozilla... mais qd tu passes sur un texte qui est dans la cellule, elle reprend sa couleur d'origine... snul..
Marsh Posté le 08-07-2002 à 22:50:23
ben moi je n'ai aucune des 2 methodes qui marche!
voici un exemple de ce ke g fait:
<table>
<tr>
<td id="T1" class="titre" onmouseover="document?getElementById("T1" ).style.color='#ff0000';">
<a HREF="archives.html" target="accueil" >Archives</a>
</td>
</tr>
</table>
je dois me tromper donc si vous pouviez corriger ca m'aiderais beaucoup! Merci
Marsh Posté le 08-07-2002 à 23:13:56
perso, je fais ça
<td onmouseover="this.className='FondTableau1'" onmouseout="this.className=''">
en définissant FondTableau1 dans une feuille de style ou bien dans tes balises <style></style>
Ca passe sous IE 6.0
Marsh Posté le 09-07-2002 à 00:00:03
ca marche ca merci c cool !!!
ke signifie le this la dedans? ca defini un objet courant ici la cellule surement!
Marsh Posté le 27-08-2002 à 20:18:27
Pkoi ça ça marche pas ??
Code :
|
es-ce parce que j'ai ça ?? :
Code :
|
Marsh Posté le 27-08-2002 à 20:24:24
thunderbird54 a écrit a écrit : ben moi je n'ai aucune des 2 methodes qui marche! voici un exemple de ce ke g fait: <table> <tr> <td id="T1" class="titre" onmouseover="document?getElementById("T1" ).style.color='#ff0000';"> <a HREF="archives.html" target="accueil" >Archives</a> </td> </tr> </table> je dois me tromper donc si vous pouviez corriger ca m'aiderais beaucoup! Merci |
bah non et pour cause...
Marsh Posté le 27-08-2002 à 20:42:31
Ouais en fait c'est bien compliqué :
Par exemple :
<td onmouseover="this.style.backgroundColor='#ff0';" onmouseout="this.style.backgroundColor='transparent';"> ... </td>
Marsh Posté le 27-08-2002 à 20:46:45
alors voilà ce que j'ai fait et qui marche :
Code :
|
c'est là que se pose un nouveau problème...
J'ai du texte dans une de mes cellules :
Code :
|
et ce que je voudrais, c'est que, quand je passe au dessus de la ligne, où que ce soit, mon texte change de forme... que ça soit sur mon lien ou sur mon image...
Marsh Posté le 27-08-2002 à 21:04:06
Ben c'est pareil, tu joues avec les attributs de style : fontWeight, fontFamily, fontSize....
par exemple this.style.fontWeight='bold';
Cela dit, si tu as beaucoup de styles à changer autant créer 2 clases que tu swapes (c'est ce que tu voulais faire au départ). Par exemple :
tr.classe1 { |
Normalement ça marche.
Marsh Posté le 27-08-2002 à 21:46:47
ça marche nickel, sauf que :
es-ce que ça se corse si mon texte est un lien..
es-ce que j'ai le droit de mettre ça :
Code :
|
Le truc, c'est que, ça change bien ma mise en forme de texte (gras/pas gras), mais le texte de mes liens reste en violet...
Marsh Posté le 27-08-2002 à 21:59:56
C'est normal, parce que les liens n'héritent pas des propriétés de l'élément qui les contient. Il faut donc définir leur style :
td.classe1 a {
text-decoration: none;
font-weight: normal;
}
td.classe2 a {
text-decoration: none;
font-weight: bold;
}
le fait d'écrire "td.classe1 a" signifie que les propriétés CSS s'appliquent aux élément <a> contenus dans un <tr> qui a pour classe "classe1"
Bon, et puis il y a beaucoup de fautes dans tes CSS :
'font-style' n'a pas de valeur bold
'font-color' n'existe pas, c'est 'color'
'font-family' doit avoir une liste de polices : Arial, helvetica, sans-serif (Arial est une police Windows, tout le monde ne l'a pas)
'font-size' tu dois donner une unité à la taille de ta police. Par exemple 12px Voir http://www.yoyodesign.org/doc/w3c/ [...] size-props
Marsh Posté le 27-08-2002 à 22:07:35
voilà ce que j'ai :
Code :
|
alors, on peux me dire koi mettre et où, pour que, quand je passe sur une ligne (ou que çe soit sur la ligne) la police de mon lien change.... svppppp.....
Marsh Posté le 27-08-2002 à 22:26:19
ok, suffisait de rajouter, en plus de ça :
Code :
|
ce petit bout de code...
Code :
|
un grand merci à gm_superstar
Marsh Posté le 27-08-2002 à 22:29:01
Edit: OK, vu ton dernier message.
Pense à corriger les erreurs de CSS que j'ai signalé !
Marsh Posté le 30-08-2005 à 09:57:19
Ce hack fonctionne (changement de classe à la volé), mais est 100 fois moins fluide qu'un bon vieux hover. dommage.
Marsh Posté le 07-07-2002 à 20:32:08
j'aimerais changer la couleur de fond d'une cellule de mon tableau quand l'utilisateur positionne la souris dessus.
Pour cela je dois utiliser l'evenement onMouseOver de javascript, mais je n'arrive pas à l'appliquer pour qu'elle me change la couleur de la cellule.
comment faire? j'ai essayer d'utiliser la propriété bgcolor mais sans resultat.
Merci