Imput case texte avec image qui disparait

Fermé
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 9 juil. 2010 à 02:22
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 - 10 juil. 2010 à 00:29
Bonjour,
j'ai une case imput, j'ai réussi a faire mettre un texte par défaut qui disparait quand on clique sur la case mais je n'arrive pas à faire ceci avec une image.
En fait j'ai une image de font dans ma case si on ecrit on ne voit plus rien du coup, voilà pourquoi je voudrais que cette image disparaisse au clic.
Merci.




A voir également:

2 réponses

Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
Modifié par Theophile76 le 9/07/2010 à 03:18
http://codingforums.com/showthread.php?t=108159
C'est le même problème, il est peut être mieux expliqué mais je n'ai pas compris la réponse.
Car en fait la technique fonctionne mais pas pour moi car j'ai déjà un backgroud par défaut.
0
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 4 496
9 juil. 2010 à 07:15
Salut.

Il suffit de créer deux classes CSS : une pour quand le champ est vide, donc avec le background, et une autre, sans background.
Par exemple : .champVide et .champRempli

Et pour le code :
<input
	type="text"
	name="nom"
	value="Texte par défaut"
	class="champVide"
	onfocus="if(this.value == this.defaultValue) { this.className = 'champVide'; this.value = '';}"
	onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'champVide'; } else { this.className = 'champRempli'; }"
/>
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
Modifié par Theophile76 le 9/07/2010 à 23:58
Jai essayé, ça fonctionne mais pas aud début :
Quand je clique dans la case, aucun backgroud, quand je clique hors de la case, le backgroud ce met (jusqu'ici aucun problème donc) mais au chargement de la page il n'y en a pas hors je voudrais qu'il y en ai un.
.defaut { background-image: url("image.png"); }   
.click { background-image: url("none"); }

et dans mon imput :
<INPUT onfocus="if(this.value == this.defaultValue) { this.className = 'click'; this.value = '';}"  
 onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'defaut'; } else { this.className = 'click'; }" ...>
0
avion-f16 Messages postés 19244 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 17 avril 2024 4 496
10 juil. 2010 à 00:22
Tu as sans doute oublié de modifier l'attribut "class".
0
Theophile76 Messages postés 1791 Date d'inscription mardi 6 mars 2007 Statut Membre Dernière intervention 16 avril 2021 372
Modifié par Theophile76 le 10/07/2010 à 00:30
merci ça marche ^^ :

Head
.defaut { background-image: url("image.png"); }  
.click { background-image: url("none"); }


Body
<INPUT class="defaut"  
onfocus="if(this.value == this.defaultValue) { this.className = 'click'; this.value = '';}"  
 onblur="if(this.value == '') { this.value = this.defaultValue; this.className = 'defaut'; } else { this.className = 'click'; }" ... >  
    
0