Dégradé progressif sur input text

**avogadro** · 24/08/2006, 10h47

Bonjour,

j'ai fait une petite page qui permet de faire des effets de dégradé progressif au passage de la souris sur des input text, a la fonçon de enlightenement ou sur certain menu que l'on trouve sur le web!

Mon probleme est que quand il y a un input text ça marche niquel, mais quand il y en a plusieur (comme sur l'exemple que je vais vous donner), ça ne marche pas car quand on passe la l'input suivant, la valeur qui sert au changement de couleur se trouve elle meme modifiée...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html>
 
<head>
 
</head>
 
<body>
<!--
<br/><br/>
tableau des couleurs:
<table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
<tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
<tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
<tr><td BGCOLOR="#FFFF93">color 3</td></tr>
<tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
<tr><td BGCOLOR="#ffffff">color 5</td></tr>
</table>
 
<br/><br/>
-->
 
<p>
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='col(this);' 
onMouseOut='degrade(this);'   
id="un" name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='col(this);' 
onMouseOut='degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" 
maxlength="50" onMouseOver='col(this);' 
onMouseOut='degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='col(this);' 
onMouseOut='degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='col(this);' 
onMouseOut='degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='col(this);' 
onMouseOut='degrade(this);'   
name="pharma_name" />
<br/><br/>
 
</p>
 
 
<script type="text/javascript">
var numero;
var quelle_ligne;
 
 
function col(obj){
obj.style.backgroundColor="#ffff00"
}
 
function degrade(obj){
 
	// Initialisation
	numero = 1;
	quelle_ligne = obj;
 
	setTimeout("saoupas()",80);		 
}
 
function saoupas(){
	switch (numero)
	{
	  case 1:		
		quelle_ligne.style.backgroundColor = "#ffff00";		
		setTimeout("saoupas()",80);		 
		//alert('couleur 1');
	   break;
 
	  case 2:
		quelle_ligne.style.backgroundColor = "#FFFF6B";	
		setTimeout("saoupas()",80);		 
		//alert('couleur 2');	
		break;
 
	  case 3:
		quelle_ligne.style.backgroundColor = "#FFFF93"; 
		setTimeout("saoupas()",80);		 
		//alert('couleur 3');		
		break;
 
	  case 4:
		quelle_ligne.style.backgroundColor = "#FFFFBB";	
		setTimeout("saoupas()",80);		 
		//alert('couleur 4');	
		break;		
 
	  case 5:
		quelle_ligne.style.backgroundColor = "#ffffff";	
		//alert('couleur 5');	
		break;	
	}
	numero++;
}
</script>
</body>
</html>

Il y aurait la possibilité de faire un Objet javascript mais c'est du javascript "hardcore", si quelqu'un a une autre méthode pour parvenir au résultat

Merci...

**SpaceFrog** · 24/08/2006, 11h56

en gros il est perdu car la variable numero est commune à tous ...
ainsi que l'instanciation su settimeout

j'ai modifié un peu le script pour utiliser un setinterval plus rationnel et pour attribuer à chaque textbox une instanciation à la fois du setInterval et donc du clearInterval, mais aussi de l'incrément du numéro ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
 
<head>
 
</head>
 
<body>
<!--
<br/><br/>
tableau des couleurs:
<table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
<tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
<tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
<tr><td BGCOLOR="#FFFF93">color 3</td></tr>
<tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
<tr><td BGCOLOR="#ffffff">color 5</td></tr>
</table>
 
<br/><br/>
-->
 
<p>
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver=' new col(this);' 
onMouseOut=' degrade(this);'   
id="un" name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" 
maxlength="50" onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
</p>
 
 
<script type="text/javascript">
var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
 
 
function col(obj1){
obj1.style.backgroundColor="#ffff00"
}
 
function degrade(obj2){
if (!obj2.level){obj2.level=0;}
obj2.level++
 
 
    obj2.run=(setInterval( function(){ saoupas(obj2)},80))
   }
 
 
function saoupas(obj3){
	obj3.style.backgroundColor=degarray[obj3.level]
	obj3.level++;
		if (obj3.level>4){clearTimeout(obj3.run);
					obj3.level=0
	             	              }
 
 
}
</script>
</body>
</html>

**SpaceFrog** · 24/08/2006, 12h00

et voici qui b=vient corriger le bug de deux onmouseover successif trop rapprochés ... :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
 
<head>
 
</head>
 
<body>
<!--
<br/><br/>
tableau des couleurs:
<table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
<tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
<tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
<tr><td BGCOLOR="#FFFF93">color 3</td></tr>
<tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
<tr><td BGCOLOR="#ffffff">color 5</td></tr>
</table>
 
<br/><br/>
-->
 
<p>
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver=' new col(this);' 
onMouseOut=' degrade(this);'   
id="un" name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" 
maxlength="50" onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
</p>
 
 
<script type="text/javascript">
var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
 
 
function col(obj1){
obj1.style.backgroundColor="#ffff00"
}
 
function degrade(obj2){
if (!obj2.level){obj2.level=0;}
obj2.level++
 
 
    obj2.run=(setInterval( function(){ saoupas(obj2)},80))
   }
 
 
function saoupas(obj3){
	obj3.style.backgroundColor=degarray[obj3.level]
	obj3.level++;
		if (obj3.level>4){clearTimeout(obj3.run);
					obj3.level=0
	             	              }
 
 
}
</script>
</body>
</html>

si il y a deja un setTimeout qui courre sur la zone, il faut le vider et réinitialiser le level ...

**javatwister** · 24/08/2006, 12h06

copié-collé d'un bout de code que j'avais mis sur EJS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script type="text/javascript"> 
 
////////////////////////////////////
// SCRIPT A PLACER EN FIN DE BODY //
////////////////////////////////////
 
var couleur;
var b=0;var c=255;d=100;
var obj;
 
function on(e){
if(!obj){obj=window.Event ? e.target : event.srcElement};
 
couleur="rgb("+b+","+c+","+d+")";
 
if(b<=245){b+=10}
else if(b>245 && c>10){c-=10}
else if(d>0){d-=10}
 
obj.style.color=couleur;
 
un=setTimeout("on()",10)
}
 
function off(){
clearTimeout(un);
obj=false;
 
b=0;c=255;d=100;
 
this.style.color='000000'
}
 
var liens=document.links;
for(i=0;i<liens.length;i++){
liens[i].onmouseover=on;
liens[i].onmouseout=off;
}
</script>

et lien perso :http://javatwist.imingo.net/decolo.php

**avogadro** · 24/08/2006, 12h49

Envoyé par SpaceFrog

et voici qui b=vient corriger le bug de deux onmouseover successif trop rapprochés ... :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html>
 
<head>
 
</head>
 
<body>
<!--
<br/><br/>
tableau des couleurs:
<table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
<tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
<tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
<tr><td BGCOLOR="#FFFF93">color 3</td></tr>
<tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
<tr><td BGCOLOR="#ffffff">color 5</td></tr>
</table>
 
<br/><br/>
-->
 
<p>
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver=' new col(this);' 
onMouseOut=' degrade(this);'   
id="un" name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" 
maxlength="50" onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
</p>
 
 
<script type="text/javascript">
var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
 
 
function col(obj1){
obj1.style.backgroundColor="#ffff00"
}
 
function degrade(obj2){
if (!obj2.level){obj2.level=0;}
obj2.level++
 
 
    obj2.run=(setInterval( function(){ saoupas(obj2)},80))
   }
 
 
function saoupas(obj3){
	obj3.style.backgroundColor=degarray[obj3.level]
	obj3.level++;
		if (obj3.level>4){clearTimeout(obj3.run);
					obj3.level=0
	             	              }
 
 
}
</script>
</body>
</html>

si il y a deja un setTimeout qui courre sur la zone, il faut le vider et réinitialiser le level ...

oui ok ça marche pas mal, je vais juste le modifier pour que la couleur s'arrete au blanc et ne fasse pas la boucle indéfiniment !

EDIT: en fait il doit y avoir des bug a cause du onMouseOver parce ça doit etre vraiment bien placé au dessus pour que ça marche, une solution serait peu etre d'enlever cet évènement je sais pas !

**SpaceFrog** · 24/08/2006, 13h25

??? ben chez moi ça s'arrete au blanc ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
 
<head>
 
</head>
 
<body>
<!--
<br/><br/>
tableau des couleurs:
<table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
<tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
<tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
<tr><td BGCOLOR="#FFFF93">color 3</td></tr>
<tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
<tr><td BGCOLOR="#ffffff">color 5</td></tr>
</table>
 
<br/><br/>
-->
 
<p>
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver=' new col(this);' 
onMouseOut='new degrade(this);'   
id="un" name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut='new  degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" 
maxlength="50" onMouseOver='new col(this);' 
onMouseOut='new degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' new degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' new degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
</p>
 
 
<script type="text/javascript">
var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
 
 
function col(obj1){
if (obj1.run){clearTimeout(obj1.run);
              obj1.level=0;}
obj1.style.backgroundColor="#ffff00"
}
 
function degrade(obj2){
if (!obj2.level){obj2.level=0;}
obj2.level++
 
 
    obj2.run=(setInterval( function(){ saoupas(obj2)},200))
   }
 
 
function saoupas(obj3){
	obj3.style.backgroundColor=degarray[obj3.level]
	obj3.level++;
		if (obj3.level>4){clearTimeout(obj3.run);
					obj3.level=0
	             	              }
 
 
}
</script>
</body>
</html>

**SpaceFrog** · 24/08/2006, 14h07

un petit up pour dire que j'ai du me gourer dans le copier coller précédent...
le code du post ci dessus fonctionne testé avec IE et ffx

**avogadro** · 24/08/2006, 15h04

parfais cest niquel la !

Merci, je vais changer deux trois truc mais en gros c'est bon :p

**SpaceFrog** · 24/08/2006, 17h04

Petit correctif, car mon code ne prenait pas en compte la première couleur de l'array ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<html>
 
<head>
 
</head>
 
<body>
<!--
<br/><br/>
tableau des couleurs:
<table BORDER="1" CELLSPACING="2" CELLPADDING="1" width="300"> 
<tr><td id="un_bis" BGCOLOR="#ffff00">color 1</td></tr>
<tr><td BGCOLOR="#FFFF6B">color 2</td></tr>
<tr><td BGCOLOR="#FFFF93">color 3</td></tr>
<tr><td BGCOLOR="#FFFFBB">color 4</td></tr>
<tr><td BGCOLOR="#ffffff">color 5</td></tr>
</table>
 
<br/><br/>
-->
 
<p>
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver=' new col(this);' 
onMouseOut='new degrade(this);'   
id="un" name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut='new  degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" 
maxlength="50" onMouseOver='new col(this);' 
onMouseOut='new degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' new degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' new degrade(this);'   
name="pharma_name" />
<br/><br/>
 
<input type="text" style="border:1px solid" size="40" maxlength="50" 
onMouseOver='new col(this);' 
onMouseOut=' degrade(this);'   
name="pharma_name" />
<br/><br/>
 
</p>
 
 
<script type="text/javascript">
var degarray= new Array("#ffff00","#FFFF6B","#FFFF93","#FFFFBB","#ffffff")
 
 
function col(obj1){
if (obj1.run){clearTimeout(obj1.run);
              obj1.level=0;}
obj1.style.backgroundColor="#ffff00"
}
 
function degrade(obj2){
if (!obj2.level){obj2.level=0;}
obj2.level++
 
 
    obj2.run=(setInterval( function(){ saoupas(obj2)},80))
   }
 
 
function saoupas(obj3){
	obj3.style.backgroundColor=degarray[obj3.level-1]
	obj3.level++;
		if (obj3.level>degarray.lenght){clearTimeout(obj3.run);
					obj3.level=0
	             	              }
 
 
}
</script>
</body>
</html>

Dégradé progressif sur input text

JavaScript

Discussions similaires

Partager

Partager