Image a la place du bouton submit

Dans un formulaire

25 avril 2006 à 16:17:29

Salut a tous !

Je voudrais savoir s'il serait possible de pouvoir remplacer le bouton submit d'origine par une image en CSS (ou autre au pire). :-°

Merci de m'eclairer a ce sujet.

-Cloud-

Reenjii

25 avril 2006 à 16:30:23

Peut être en lui appliquant du css

submit
{
background: url("img.png") no-repeat;
height: 20px;
width: 50px;
/* Etc etc */
}

Essaye déjà ça !

Sinon, tu peux aussi passer par une classe pour modifier l'espect du bouton, si tu ne veux pas généraliser à tous les boutons.

J'espers que ça va marcher, pour une couleur en fond ça marche, mais pour une image je suis pas sûr.

Tidusora

25 avril 2006 à 16:40:16

ca marche pas ... :-°

Quelqu'un aurait une idée ...? :-°

anonymousguest

25 avril 2006 à 16:47:36

Citation : Benjitheone

Peut être en lui appliquant du css

oui
mais plutôt comme ceci:

.submit
{
background: url("img.png") no-repeat;
height: 20px;
width: 50px;
/* Etc etc */
}

avec ceci pour ton bouton:
<input type="submit" value="Soumettre" class="submit" />

Tidusora

25 avril 2006 à 16:54:29

C'est bon ca marche!

Mais est-ce que l'on peut faire un changement de cette image lorsque l'on clique dessus ? :-°

Merci de votre aide !

gooopy007

25 avril 2006 à 16:58:50

essai sa pour voir :

.submit:focus
{
background: url("img-clique.png") no-repeat;
height: 20px;
width: 50px;
}

Tidusora

25 avril 2006 à 17:02:30

marche pas

Meme avec le ".submit:active" Oo
Donc je vois pas ... :-°

Merci de votre aide !

TigrOar

25 avril 2006 à 20:29:54

Moi aussi je me suis penché sur la question et j'avoue ne pas avoir trouvé de réponse

Si quelqu'un était en mesure de nous aider nous vous serion sreconnaissant

Merci d'avance

Tigrou

jchouix

25 avril 2006 à 21:34:14

salut,
je n'ai pas testé mais normalement, ça devrait fonctionner.
1)Créer deux classes distinctes, l'une pour le bouton submit au départ et l'autre pour le bouton submit après le click.

.submit
{
background: url("img.png") no-repeat;
height: 20px;
width: 50px;
/* Etc etc */
}

.submitClick
{
background: url("img-clique.png") no-repeat;
height: 20px;
width: 50px;
/* Etc etc */
}

2) Ensuite, rajouter un évènement onclick dans la balise input pour changer la classe lors du click sur le bouton.

Voilà. A vous de tester et de me donner le résultat.
A+

TigrOar

25 avril 2006 à 22:05:44

Merci x)
En effet ça marche impacable

une tite question... ça marche aussi en oneMouse ? 'on sait jamais'

Mais sinon tout est impecable merci

Mico

26 avril 2006 à 11:15:18

normalement y'a pas de problèmes mais c onMouseOver.

Benji

26 avril 2006 à 11:18:03

llouis

26 avril 2006 à 11:18:53

Sans utiliser de class, tu peux aussi passer par la méthode

input[submit]
{
background : url(image.gif) ;
}