SetTimeout

pas44 Messages postés 28 Date d'inscription Statut Membre Dernière intervention -
pas44 Messages postés 28 Date d'inscription Statut Membre Dernière intervention - 31 oct. 2012 à 17:04

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

Afficher la suite

5 réponses

Réponse 1 / 5

asmaanoor Messages postés 73 Date d'inscription Statut Membre Dernière intervention 18

Bonsoir,
essaye ca
onMouseOver=setTimeout("this.style.background='#FF9933"',10000)
onmouseout=setTimeout("this.style.background='#3F0AD0'",10000)

Réponse 2 / 5

Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention 274

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>

Réponse 3 / 5