Discussion :

[superpigeon]

Bonjour,

Pour un formulaire, j'ai remplacé un bouton classique par une image avec :

Code :

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

<input type="image" src="images/btnprec.gif" alt="précédent">

en fait... la plupart de mes boutons ont été remplacés par des images comme cela.
Maintenant, je voudrais changer le design de mon site, ya-t-il un moyen de changer l'image associée aux boutons grace au CSS ?

Merci d'avance

[Peut-êtreUneRéponse]

Par le CSS ce n'est pas possible. Pourquoi ne pas écraser ton image source par ta nouvelle image ( = même nom de fichier)?

.

[superpigeon]

En fait je voudrais que le 2 design soient accessible par un menu déroulant.
Il me faut donc pouvoir passer d'une image à l'autre facilement.

Je pourrais faire un if en php qui vérifierait le design sélectionné mais bon... si je dois faire ça partout à chaque fois que je veux ajouter un style, j'en sortirais pas :/
Et ça fait un peu perdre au css son utilité...

Il n'y a vraiment pas de solution ?

[Peut-êtreUneRéponse]

Si tu supprimes l'attribut src de tes input et que tu rajoutes un attribut class tu peux sans problème coder en CSS ton image en background de tes boutons... mais bon si tu as beaucoup de bouton ça va te prendre un certain temps à supprimer/créer ces attributs. C'est au début de la conception que tu aurais dû utiliser le css pour styler tes boutons

Sinon en CSS le code ressemble à ça:

Code css :

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

1
2
3
4
5
input.monbouton {
    background: transparent url(ton_image.gif) no-repeat center;
    height: 30px;
    width: 150px;
}

à toi d'ajuster la hauteur et largeur des bouton en fonction de ton image, ou sa position.

.

[superpigeon]

j'ai créé les classes dans mes css

maintenant quand je fais un bouton je fais :

Code :

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

<input class="btnok" type="image">

Mais ça ne fonctionne pas il me mets le texte "Envoyer", qui doit être le texte alternatif par défaut.
Je met donc un texte alternatif moi même :

Code :

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

<input class="btnok" type="image" alt="OK">

mais le texte alternatif apparait par dessus mon image et... c'est moche.
Je prends donc le taureau par les cornes :

Code :

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

<input class="btnok" type="image" alt="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;">

c'est laid mais ça fonctionne... sauf... si mon image est plus haute qu'un bonton classique, c'est-à-dire, la plupart du temps.

En fait avec ce que j'ai fait, le bouton n'est pas remplacé par un image, mais j'ai un input de type image sans source, donc le texte alternatif, sur un bouton qui a comme fond une image définie dans le CSS... sauf que le bouton ne change pas de taille pour prendre celle du fond et ça me pose un sacré problème.

J'espère avoir été clair, mais j'avoue m'y perdre moi-même un peu : /

[superpigeon]

J'ai enfin trouvé la solution à mon problème.
je donne mon code final, on sait jamais, des fois que quelqu'un ait le même problème.
dans mon xhtml:

Code :

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

<input class="btnok" type="submit" value="&nbsp;">

le value=" " permet d'éviter que le texte alternatif par défaut vienne pointer le boût de son nez.

dans mon CSS:

Code :

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

1
2
3
4
5
6
7
	input.btnok
	{
	    background: transparent url(images/btnok.gif) no-repeat center;
	    width: 32px;
	    height: 20px;
	    border: thin none;
	}

ici, border: thin none; veut dire que je ne veux pas de bordure ni d'effet 3D sur mon bouton.
Il possible de personnaliser ce paramètre : ! voir ici !

Merci à Peut-êtreUneRéponse qui m'a bien guidé

[Bisûnûrs]

/!\ Une image en background sur un bouton ne fonctionne pas sur Safari.

[Peut-êtreUneRéponse]

arf