Dégradé progressif sur input text
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:
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...
