SetTimeout

pas44 Messages postés 29 Statut Membre -
pas44 Messages postés 29 Statut Membre - 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 90 Statut Membre 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 2051 Statut Membre 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