SetTimeout
Bonjour,
Je cherche à faire que les cellules d'un tableau se colorient en orange quand je passe la souris dessus et en bleu quand je ne la survole plus, mais que au bout de 10 seconde. (Oui je sais, Why...! mais c'est pour la bonne cause.)
j'utilise dans la balise TD :
onMouseOver=this.style.background='#FF9933'
onmouseout=setTimeout(this.style.background='#3F0AD0',10000)
ça fonctionne, a part la temorisation ...
help !
merci
Je cherche à faire que les cellules d'un tableau se colorient en orange quand je passe la souris dessus et en bleu quand je ne la survole plus, mais que au bout de 10 seconde. (Oui je sais, Why...! mais c'est pour la bonne cause.)
j'utilise dans la balise TD :
onMouseOver=this.style.background='#FF9933'
onmouseout=setTimeout(this.style.background='#3F0AD0',10000)
ça fonctionne, a part la temorisation ...
help !
merci
5 réponses
Résumé de la discussion
Problème central: on veut colorier les cellules d'un tableau en orange au survol et revenir en bleu après 10 secondes lorsque la souris n'est plus dessus, mais l'effet temporel ne se comporte pas. Plusieurs conseils portent sur des erreurs de syntaxe, l'usage de setTimeout en chaîne et des différences de comportement entre IE9 et Firefox, avec des propositions sur l’écriture timeOut et les guillemets. D'autres échanges indiquent que le problème peut être résolu en testant le script hors ligne ou en utilisant des solutions spécifiques à Firefox, certaines mentionnant ActiveX comme obstacle.
-
Bonsoir,
essaye ca
onMouseOver=setTimeout("this.style.background='#FF9933"',10000)
onmouseout=setTimeout("this.style.background='#3F0AD0'",10000) -
bonsoir,
essai ça :
<!DOCTYPE html> <html> <head> <title></title> <script> function colorTab(id,color1,color2,timeOut) { var t = document.getElementById(id); var td; for(var i = 0;td = t.getElementsByTagName('td')[i];i++) { td.colorTdOpt = { timeOut : timeOut, color1 : color1, color2 : color2 } td.addEventListener('mouseover',colorTd,false); td.addEventListener('mouseout',colorTd,false); } } function colorTd(e) { var td = e.target; switch(e.type) { case 'mouseover' : td.style.backgroundColor = td.colorTdOpt.color1; break; case 'mouseout' : setTimeout(function() {td.style.backgroundColor = td.colorTdOpt.color2;},td.colorTdOpt.timeOut); break; } } </script> <style type="text/css"> </style> </head> <body> <table id="tableau"> <tr><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td></tr> <tr><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td></tr> <tr><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td></tr> <tr><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td></tr> <tr><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td><td>blabla</td></tr> </table> <script> colorTab('tableau','red','green',1000); </script> </body> </html> -
Désolé. ça ne marche pas !
-
Si ça marche !
-
Merci Altropa. Cela fonctionne avec firefox... mais pas avec IE dommage
