Comment changer la couleur d'1 cellule d'un tableau avec onMouseOver?

Comment changer la couleur d'1 cellule d'un tableau avec onMouseOver? - HTML/CSS - Programmation

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
 

Reply

Marsh Posté le 07-07-2002 à 20:32:08   

Reply

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';"

Reply

Marsh Posté le 08-07-2002 à 10:27:22    

td:hover {
  background-color: #ff0000;
}

Reply

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.


Message édité par --greg-- le 08-07-2002 à 10:46:17
Reply

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.

Reply

Marsh Posté le 08-07-2002 à 10:54:08    

gm_superstar a écrit a écrit :

 
Ça ne marche pas avec IE.

Citation :

(et d'abord, c'est dans la norme ça??)


Oui.



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..


Message édité par --greg-- le 08-07-2002 à 10:55:32
Reply

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

Reply

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

Reply

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!

Reply

Marsh Posté le 27-08-2002 à 20:18:27    

Pkoi ça ça marche pas ??

Code :
  1. .FondTableau1{
  2. background-color:#FFFFFF;
  3. }
  4. ...
  5. ...
  6. <td width=\"15\" align=\"center\" valign=\"middle\" onmouseover=\"this.className=\'FondTableau1\'\" onmouseout=\"this.className=\'\'\"><IMG src=\"puce.png\"></td>
  7. ...
  8. ...


 
es-ce parce que j'ai ça ?? :  

Code :
  1. <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" bgcolor=\"#FF0000\">

Reply

Marsh Posté le 27-08-2002 à 20:18:27   

Reply

Marsh Posté le 27-08-2002 à 20:23:03    

Tu as essayé la méthode de thunderbird54 ?

Reply

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...

Reply

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>

Reply

Marsh Posté le 27-08-2002 à 20:46:45    

alors voilà ce que j'ai fait et qui marche :  

Code :
  1. ...
  2. <SCRIPT>
  3. function colorswap(object, color)
  4. {
  5. object.style.backgroundColor = color;
  6. }
  7. </SCRIPT>
  8. ...
  9. ...
  10. <tr onmouseover=\"colorswap(this, '#FFFFFF')\" onmouseout=\"colorswap(this, '#FF0000')\" bgColor=\"#FF0000\">
  11. ...


c'est là que se pose un nouveau problème...
 
J'ai du texte dans une de mes cellules :  

Code :
  1. <TR onmouseover="colorswap(this, '#FFFFFF')"         onmouseout="colorswap(this, '#FF0000')" bgColor=#ff0000>
  2. <TD width=15> </TD>
  3. <TD vAlign=center align=middle width=15><IMG             src="tmp_php_fichiers/puce.png"></TD>
  4. <TD><A href="http://127.0.0.1/web/ekklo/tmp.php#">Accessoires             de mode</A></TD>
  5. <TD width=15> </TD>
  6. </TR>


 
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...

Reply

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 {
  background-color: transparent;
  font-weight: normal;
}
 
tr.classe2 {
  background-color: #ffe;
  font-weight: bold;
}
 
...
 
<tr class="classe1" onmouseover="this.className='classe2';" onmouseout="this.className='classe1';">


 
Normalement ça marche.

Reply

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 :
  1. tr.classe1 {
  2. background-color: #FF0000;
  3. font-family : Arial;
  4. font-style : bold;
  5. font-weight : bold;
  6. font-size : 12;
  7. font-color : #FFFFFF;
  8. text-decoration: none
  9. }
  10. tr.classe2 {
  11. background-color: #FFFFFF;
  12. font-family : Arial;
  13. font-style : bold;
  14. font-weight : bold;
  15. font-size : 12;
  16. font-color : #FF0000;
  17. text-decoration: none
  18. }


 
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...

Reply

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

Reply

Marsh Posté le 27-08-2002 à 22:07:35    

voilà ce que j'ai :  
 

Code :
  1. <HTML>
  2. <HEAD>
  3. <STYLE>
  4. tr.classe1 {
  5. background-color: #FF0000;
  6. font-family : Arial;
  7. font-style : normal;
  8. font-weight : bold;
  9. font-size : 12;
  10. text-decoration: none
  11. }
  12. tr.classe2 {
  13. background-color: #FFFFFF;
  14. font-family : Arial;
  15. font-style : normal;
  16. font-weight : light;
  17. font-size : 12;
  18. text-decoration: none
  19. }
  20. </STYLE>
  21. </HEAD>
  22. <BODY>
  23. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  24.   <tr class="classe1" onmouseover="this.className='classe2';" onmouseout="this.className='classe1';">
  25.    <td width="15"> </td>
  26.    <td width="15" align="center" valign="middle"><IMG src="puce.png"></td>
  27.    <td><A Href="#">$Rub[$I]</FONT></A></td>
  28.    <td width="15"> </td>
  29.   </tr>
  30. </table>
  31. </BODY></HTML>


 
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.....

Reply

Marsh Posté le 27-08-2002 à 22:26:19    

ok, suffisait de rajouter, en plus de ça :  

Code :
  1. tr.classe1 {
  2. background-color: #FF0000;
  3. font-family : Arial;
  4. font-style : normal;
  5. font-weight : bold;
  6. font-size : 12;
  7. color : #FFFFFF;
  8. text-decoration: none
  9. }
  10. tr.classe2 {
  11. background-color: #FFFFFF;
  12. font-family : Arial;
  13. font-style : normal;
  14. font-weight : bold;
  15. font-size : 12;
  16. color : #FF0000;
  17. text-decoration: none
  18. }


 
ce petit bout de code...
 

Code :
  1. tr.classe1 a{
  2. color : #FFFFFF;
  3. text-decoration: none
  4. }
  5. tr.classe2 a{
  6. color : #FF0000;
  7. text-decoration: none
  8. }


 
un grand merci à gm_superstar

Reply

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é !


Message édité par gm_superstar le 27-08-2002 à 22:30:17
Reply

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.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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