champs colorés au passage de la souris

**skawll** · 10/02/2010, 22h14

Bonjour,

Lorsque l'utilisateur vient avec la souris donc le texarea prend une couleur et devient blanc à la sortie.

Projet de carrière :

Code :

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

1
2
<br/> <textarea name="commentaire" rows="5" cols="40"  onmouseover="this.style.backgroundColor='#99FFCC';" onmouseout="this.style.backgroundColor='#FFFFFF';">
		 </textarea><br/>

Je souhaiterais savoir comment faire pour appliquer cela pour tout le formulaire ?
Je pense qu'une fontion serait peut être plu approprié,non ?

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<html>
  <script type="text/javascript">
  function traiteSaisie()
  {
	alert("Veuillez préciser votre nationalité dans le champ ci-contre");
  }
 
  function verif()
  {
    if(document.candetud.nom.value==""){
		alert("Veuillez saisir le nom");
		return
	}
	else if(document.candetud.prenom.value==""){
		alert("Veuillez saisir le prenom");
		return;
	}
	else if(document.candetud.numSecusocial.value==""){
		alert("Veuillez saisir votre numéro de sécurité social");
		return;
	}
	else if(document.candetud.dateNaissance.value==""){
		alert("Veuillez saisir votre date de naissance");
		return;
	}
	else if(document.candetud.lieuNaissance.value==""){
		alert("Veuillez saisir votre lieu de naissance");
		return;
	}
	else if(document.candetud.adresse.value==""){
		alert("Veuillez saisir votre adresse");
		return;
	}
	else if(document.candetud.codePostal.value==""){
		alert("Veuillez saisir votre code postal");
		return;
	}
	else if(document.candetud.ville.value==""){
		alert("Veuillez saisir votre ville");
		return;
	}
	else if(document.candetud.domicile.value==""){
		alert("Veuillez saisir votre numéro de téléphone de votre domicile");
		return;
	}
	else if(document.candetud.mobile.value==""){
		alert("Veuillez saisir votre numéro de téléphone portable");
		return;
	}
	else if(document.candetud.specialite.value==""){
		alert("Veuillez saisir votre spécialité");
		return;
	}
	else if(document.candetud.etablissement.value==""){
		alert("Veuillez saisir votre etablissement");
		return;
	}
	else if(document.candetud.adresseEtab.value==""){
		alert("Veuillez saisir l'adresse de votre établissement");
		return;
	}
	else if(document.candetud.codePostalEtab.value==""){
		alert("Veuillez saisir le code postal de votre établissement");
		return;
	}
	else if(document.candetud.villeEtab.value==""){
		alert("Veuillez saisir la ville où se situe votre établissement");
		return;
	}
	else if(document.candetud.specialite1.value==""){
		alert("Veuillez saisir votre spécialité");
		return;
	}
	else if(document.candetud.etablissement1.value==""){
		alert("Veuillez saisir votre etablissement");
		return;
	}
	else if(document.candetud.adresseEtab1.value==""){
		alert("Veuillez saisir l'adresse de votre établissement");
		return;
	}
	else if(document.candetud.codePostalEtab1.value==""){
		alert("Veuillez saisir le code postal de votre établissement");
		return;
	}
	else if(document.candetud.villeEtab1.value==""){
		alert("Veuillez saisir la ville où se situe votre établissement");
		return;
	}
	document.candetud.submit();
  }
  </script>
  <link rel="stylesheet" media="screen" type="text/css" title="Style" href="edustyle.css" />
  <title>Inscription de l'étudiant</title>
    <center><h2>Bienvenue</h2></center>
    <center><h3>Candidature en ligne</h3><center>
	<img src="esi.png"> 
	ESI
	Ecole supérieur d'informatique
	24, boulevard de la Liberté
	75005 Paris
	<br/><img src="fl15.gif"> <a href="#" onclick="alert(' Nous vous contacterons pour un entretien dans les deux jours !');">Information à savoir</a>
  <body >
    <fieldset>
      <legend>Etat Civil</legend>
	  <form name="candetud" method="post">
	  Sexe : <input type="radio" name="sexe" value="M" checked/>Masculin
	  <input type="radio" name="sexe" value="F"/>Féminin<br/>
      <br/>Nom :<input type="text" name="nom" size="20"/>
	  Prénom : <input type="text" name="prenom" size="20"/><br/>
	  <br/>Nationalité : 
	  Française <input type="checkbox" name="nationalite[]" value="fr">
	  Etrangère <input type="checkbox" name="nationalité[]" value="etr" onclick="traiteSaisie()"> <input type="text" name="natEtr"></br>
	  <br/>Numéro De Sécurité Social : <input type="text" name="numSecusocial" size="15"/><br/>
	  <br/>Date De Naissance : <input type="text" name="dateNaissance" size="15" /><br/>
	  <br/>Lieu de Naissance : <input type="text" name="lieuNaissance" /> <br/>
	  <br/>Adresse : <input type="text" name="adresse"/>
	  Code Postal : <input type="text" name="codePostal" size="5"/>
	  Ville : <input type="text" name="ville"/><br/>
	  <br/>Telephone :<br/>
	  Domicile : <input type="text" name="domicile"/>
	  Mobile : <input type="text" name="mobile"/>
	</fieldset>
 
	<fieldset>
	  <legend>Scolarité</legend>
	  Dernier diplôme obtenu :<select name="diplome">
        <option value="bac">Bac</option>
        <option value="bts">Bts</option>
		<option value="dut">Dut</option>
        <option value="prepa">Prepa</option>
		<option value="licence">Licence</option>
		<option value="master">Master 1</option>
		<option value="autre">Autre</option>
     </select>
	 Indiquez la spécialité : <input type="text" name="specialite"/>
	 Etablissement : <input type="text" name="etablissement"/>
	 Adresse : <input type="text" name="adresseEtab"/>
	 Code Postal : <input type="text" name="codePostalEtab" size=5/><br/>
	 <br/>Ville : <input type="text" name="villeEtab"/><br/>
	 <br/>Diplôme en cours :  <select name="diplome">
        <option value="bac">Bac</option>
        <option value="bts">Bts</option>
		<option value="dut">Dut</option>
        <option value="prepa">Prepa</option>
		<option value="licence">Licence</option>
		<option value="master">Master 1</option>
		<option value="autre">Autre</option>
     </select>
	 Indiquez la spécialité : <input type="text" name="specialite1"/>
	 Etablissement : <input type="text" name="etablissement1"/>
	 Adresse : <input type="text" name="adresseEtab1"/>
	 Code Postal : <input type="text" name="codePostalEtab1" size="5"/><br/>
	 <br/>Ville : <input type="text" name="villeEtab1"/><br/>
	 <br/>Langue parlées<br/>
	   Anglais <input type="checkbox" name="langue[]" value="fr"></br>
	   Niveau<select name="niveau">
	   <option value="niveau"></option>
       <option value="niveau">Notions</option>
	   <option value="niveau">Moyen</option>
       <option value="niveau">Courant</option>
	   <option value="niveau">Bilingue</option>
	   </select><br/>
	   Alemand <input type="checkbox" name="langue[]" value="eng"></br>
	   Niveau<select name="niveau">
	   <option value="niveau"></option>
       <option value="niveau">Notions</option>
	   <option value="niveau">Moyen</option>
       <option value="niveau">Courant</option>
	   <option value="niveau">Bilingue</option>
	   </select><br/>
	   Chinois <input type="checkbox" name="langue[]" value="chi"></br>
	   Niveau<select name="niveau">
	   <option value="niveau"></option>
       <option value="niveau">Notions</option>
	   <option value="niveau">Moyen</option>
       <option value="niveau">Courant</option>
	   <option value="niveau">Bilingue</option>
	   </select><br/>
	   Espagnol <input type="checkbox" name="langue[]" value="esp"></br>
	   Niveau<select name="niveau">
	   <option value="niveau"></option>
       <option value="niveau">Notions</option>
	   <option value="niveau">Moyen</option>
       <option value="niveau">Courant</option>
	   <option value="niveau">Bilingue</option>
	   </select><br/>
	   </fieldset>
 
	   <fieldset>
	     <legend>Informations complémentaires</legend>
		 Projet de carrière :<br/> <textarea name="commentaire" rows="5" cols="40"  onmouseover="this.style.backgroundColor='#99FFCC';" onmouseout="this.style.backgroundColor='#FFFFFF';">
		 </textarea><br/>
		 <br/>Quelles sont les raisons de votre candidature pour notre école?<br/> <textarea name="raisons" rows="5" cols="40">
		 </textarea>
	   </fieldset>
	   <input type="button" name="valider" value="valider" onclick="verif()"/>
	  </form>
  </body>
</html>

**E.Bzz** · 11/02/2010, 14h29

Bonjour,

Envoyé par skawll

Je souhaiterais savoir comment faire pour appliquer cela pour tout le formulaire ?

ben tu déplaces les onmouseover/onmouseout dans le tag <form>

A+

**skawll** · 11/02/2010, 22h55

Si je le met dans form, c'est tout le fieldset qui est concerné alors que ça doit être les input!

**SpaceFrog** · 12/02/2010, 09h04

Il faut boucler sur la collection des element auxquels tu veux attribuer ce comportement pour leur donner un mouseover et mouseout ..
pour selectionner la collection tu peux soit utiliser une fonction perso du type de celle que j'ai mis dans les contributions (getElement(s)ById filtré par une regExp) ou alors utiliser jquery et le puissance de ces selecteur qui permettent en même temps d'attribuer des fonctions

champs colorés au passage de la souris

JavaScript

Discussions similaires

Partager

Partager