[résolu] Code idéal pour un bouton avec background ?

Salut à tous !

A votre avis, quel serait le code idéal pour avoir :
- avec CSS : un bouton (sûrement un input) avec simplement une image de fond spécifiée en CSS, et un hover avec une autre image
- sans CSS : ce même bouton mais bien sûr sans l'image définie dans le CSS, et avec en remplacement un texte (celui que l'on mettrait en value="" dans le input)

En gros, j'ai pensé à un truc du genre :

<input type="button" value="go" class="maclasse" />

Et le CSS :

input.maclasse {
   width: 15px;
   height: 20px;
   background: transparent url(./images/imageOut.gif) no-repeat left center;
}

input.maclasse:hover {
   background: transparent url(./images/imageOver.gif) no-repeat left center;
}

Le but étant que mon bouton s'affiche avec l'image et le hover qui fonctionne, mais sans le texte value="go".
Sauf si la CSS est désactivé, dans ce cas le texte value="go" est affiché...

Bref, voilà !
Donc si quelqu'un a une idée, grand merci

Aurapp
Modifié par aurapp (13 Oct 2006 - 17:39)

Je ne suis pas sûr d'avoir bien compris, mais dans le doute je signale un article qui vient d'être publié sur Digital Web: Push my button, sur l'utilisation et le "stylage" des boutons...

Article fort interessant !!

... mais quand on voit la valeur qu'on récupère avec IE 5.5 en validant le formulaire, ça laisse songeur sur la compatibilité de la balise BUTTON ....

(Voir notament le dernier exemple qui passe les resultats du formulaire en GET)

En tout cas ça pourrait résoudre le problème d'aurapp

easyzik a écrit :
... mais quand on voit la valeur qu'on récupère avec IE 5.5 en validant le formulaire, ça laisse songeur sur la compatibilité de la balise BUTTON ....

Et ouais, même pas capable de gérer la base de l'html4

Pour repondre a la question du debut, effectivement il faut bien passer par un:

<button type="submit" name="ok" value="Valider"><font>Valider</font></button> 

et ensuite dans la css:

button{

  background-image: url(images/ok_bleu.gif);
	background-repeat: no-repeat;
	border:0px;
	width:36px;
	height:20px;
	cursor: pointer;
}
button:hover{

  background-image: url(images/ok_bleu_over.gif);
	background-repeat: no-repeat;
	border:0px;
	width:36px;
	height:20px;
	cursor: pointer;
}
button font{
  display:none;
}

Modifié par Bouh les gens (12 Oct 2006 - 14:31)

Bouh les gens a écrit :
Pour repondre a la question du debut, effectivement il faut bien passer par un:

<button type="submit" name="ok" value="Valider"><font>Valider</font></button> 

J'aime bien le <font>, ça fait décoratif

En effet, ta solution fonctionne, merci !

Seule question restante : il y a un soucis d'alignement avec le texte à côté du <button>, comment solutionner cela ?

Merci...

aurapp

peut-etre avec un vertical-align ...

extra, merci !
c'est bien la 1ère fois que je vois un vertical-align qui fonctionne...