onmouseover et css

onmouseover et css - HTML/CSS - Programmation

Marsh Posté le 26-03-2004 à 08:56:06    

'lut tt le monde
voila je voudrais faire un tableau, et lorsque l'utilisateur pointe sur une linge, la ligne entiere change de couleur.
en HTML ca va, il faut mettre un onMouseOver="background=red" par exemple
mais comme je passe par du CSS je voudrais mettre ca dans le css.
mais j'arrive pas :'(
le hover fonctionne pas (c que pour les liens)
ou alors faut que je mette toute ma ligne en lien ? :D

Reply

Marsh Posté le 26-03-2004 à 08:56:06   

Reply

Marsh Posté le 26-03-2004 à 09:06:59    

Tres simple :
 
Dans le HTML sur la ligne par exemple :
 
<tr id="truc">
 
ensuite dans le JS :
 
document.getElementById('truc').style.background = "#FF0000"; (par exemple).
 
Voilà le principe.

Reply

Marsh Posté le 26-03-2004 à 09:07:30    

eu en fait, c bon j'ai trouve :)

Reply

Marsh Posté le 26-03-2004 à 09:07:45    

oui mais je fais pas ca en JS

Reply

Marsh Posté le 26-03-2004 à 09:08:34    

swich a écrit :

oui mais je fais pas ca en JS
 


 
Ah ? et tu le fais comment alors ? (sachant qu'il n'y a pas de solution parfaitement crossbrowser à l'heure actuelle en CSS) ?

Reply

Marsh Posté le 26-03-2004 à 09:13:24    

bah en fait je fais :  
 
<tr onmouseover="class=surligne" onmouseout="class=normal">
 

Reply

Marsh Posté le 26-03-2004 à 09:15:15    

swich a écrit :

bah en fait je fais :  
 
<tr onmouseover="class=surligne" onmouseout="class=normal">
 
 


 
Ah ? Et c'est quoi ça ? Du C++ peut être ?  [:totozzz]

Reply

Marsh Posté le 26-03-2004 à 09:15:34    

bah c du html :)
 

Reply

Marsh Posté le 26-03-2004 à 09:16:43    

swich a écrit :

bah c du html :)
 
 


 
Ah oui bien sûr...  :D

Reply

Marsh Posté le 26-03-2004 à 09:17:49    

:D

Reply

Marsh Posté le 26-03-2004 à 09:17:49   

Reply

Marsh Posté le 26-03-2004 à 09:40:16    

et merde ca marche pas :'(

Reply

Marsh Posté le 26-03-2004 à 09:44:40    

swich a écrit :

et merde ca marche pas :'(
 


 
Tu relis ce que j'ai écrit au dessus...  :o

Reply

Marsh Posté le 26-03-2004 à 09:49:40    

hehe, mais c'est louche, si je fais :
echo "<TR onMouseover=\"this.style.backgroundColor='#ffe12e'\">";
 
ca marche
mais si je fais
echo "<TR onmouseover=\"class=trHover\">"; bah ca marche plus
:'(

Reply

Marsh Posté le 26-03-2004 à 09:51:15    

"<TR onMouseover=\"this.className='trHover'\">";

Reply

Marsh Posté le 26-03-2004 à 09:53:42    

merci bien :)

Reply

Marsh Posté le 26-03-2004 à 10:00:39    

Sinon le hover marche très bien pour les cellules de tableau... mais slmnt sous Mozilla :p

Reply

Marsh Posté le 26-03-2004 à 10:14:00    

k, c bon a savoir, mais pas de chance pour moi, les utilisateurs n'ont que IE

Reply

Marsh Posté le 26-03-2004 à 10:22:41    

krtek a écrit :

Sinon le hover marche très bien pour les cellules de tableau... mais slmnt sous Mozilla :p


 
à mon avis dans tous les browsers autres que IE ça marche très bien :whistle:


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 26-03-2004 à 11:02:06    

antp a écrit :


 
à mon avis dans tous les browsers autres que IE ça marche très bien :whistle:


je confirme.

Reply

Marsh Posté le 26-03-2004 à 19:30:40    

Voilà une bidouille JS pour faire marcher le hover avec IE sans toucher au code HTML  :

Code :
  1. iepatch = document.getElementById("pres" );
  2. divs    = iepatch.getElementsByTagName("div" );
  3. for(n = 0; n < divs.length; n++){
  4. divs[n].onmouseover = function(){this.className = "aff";};
  5. divs[n].onmouseout  = function(){this.className =  "";};
  6. }


On met dans le code CSS :
#pres div:hover, #pres div.aff {le code}
Ainsi, "#pres div.aff" réagit comme le fait "#pres div:hover".
 
Enfin, c'est la seule chose que j'ai codée en JS, y a p-ê moyen de faire mieux...


Message édité par kalex le 26-03-2004 à 19:32:55
Reply

Marsh Posté le 26-03-2004 à 19:32:56    

kalex a écrit :

Voilà une bidouille JS pour faire marcher le hover avec IE sans toucher au code HTML  :

Code :
  1. iepatch = document.getElementById("pres" );
  2. divs    = iepatch.getElementsByTagName("div" );
  3. for(n = 0; n < divs.length; n++){
  4. divs[n].onmouseover = function(){this.className = "aff";};
  5. divs[n].onmouseout  = function(){this.className =  "";};
  6. }


On met dans le code CSS :
#pres div:hover, #pres div.aff {le code}
Ainsi, IE "#pres div.aff" réagit comme fait "#pres div:hover".
 
Enfin, c'est la seule chose que j'ai codée en JS, y a p-ê moyen de faire mieux...


 
ça marche avec quelle version d'IE ça ? Et pour MAC ?

Reply

Marsh Posté le 26-03-2004 à 19:34:13    

J'ai testé qu'avec IE 6 sous XP...

Reply

Marsh Posté le 26-03-2004 à 19:45:29    

kalex a écrit :

J'ai testé qu'avec IE 6 sous XP...


 
Ah ouai... ok...  :whistle:  ben le problème d'IE, c'est qu'il est pas seulement incompatible avec les autres, mais bien souvent avec lui-même, enfin plus particulièrement entre les différentes versions...
 
C'est pourquoi les codes dévolus à tel ou tel navigateur, c'est non chaque fois qu'on peut l'éviter.
 
Et dans le cas présent on peut l'éviter en utilisant le même javascript pour tous les navigateurs.

Reply

Marsh Posté le 26-03-2004 à 19:56:35    

Je pense que mon code est de toute façon adaptable, c'est pas très évolué comme manip. ;)

Reply

Marsh Posté le 26-03-2004 à 20:08:56    

kalex a écrit :

Je pense que mon code est de toute façon adaptable, c'est pas très évolué comme manip. ;)


 
Ton code est un code pour IE et seulement IE dans ce cas précis... Si le même code fonctionne sur tous les navs tels que IE 5+, Mozilla 1+ et Opera 7+ , alors il devient intéressant.  :)

Reply

Marsh Posté le 26-03-2004 à 20:12:51    

Tant mieux s?il ne fonctionne qu'avec IE : il n'a pas besoin de fonctionner avec les autres (cf: gizmo ;)) !
 
Et j'ai pas le temps de regarder comment ils ont fait, mais http://www.nofrag.com/ a l'air d'avoir trouvé une bonne soluce.

Reply

Marsh Posté le 26-03-2004 à 20:14:33    

kalex a écrit :

Tant mieux s?il ne fonctionne qu'avec IE : il n'a pas besoin de fonctionner avec les autres (cf: gizmo ;)) !
 
Et j'ai pas le temps de regarder comment ils ont fait, mais http://www.nofrag.com/ a l'air d'avoir trouvé une bonne soluce.


 
Ben non, pour une fois, pas cf gizmo, parce que si on commence à adpater chaque truc qu'on fait pour tel ou tel navigateur, on en finit plus.  
Donc quand une solution universelle existe, même si ce n'est pas la meilleure pour tel ou tel navigateur, on la garde.

Reply

Marsh Posté le 26-03-2004 à 20:22:01    

Moi, je trouve ça plus propre. Avec un navigateur "normal", les menus css marchent très bien : pas de JS (y a des gens qui désactivent), c'est simple, propre et standard. C'est ça la solution universelle !
 
Mais voilà on ne va pas oublier 95 % des visiteurs, alors en attendant l'anéantissement définitif d'IE on fait une petite bidouille.


Message édité par kalex le 26-03-2004 à 20:22:27
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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