28220 sujets

CSS et mise en forme, CSS3

[Résolu] Personnalisation d'un bouton submit

Modérateur
Bonjour,

Je dois remplacer les différents boutons de mon application web par des images. J'ai trouvé quelques solutions possibles, mais il me reste à savoir laquelle est la mieux adaptée pour ce genre de choses. Voici un résumé des solutions que j'ai imaginé :

1. Utiliser la balise <button /> et insérer à l'intérieur le code html d'une image.

<button id="btnAction" name="btnAction" type="submit" style="background-color:transparent;border:0;"><img src="images/boutons/vider_panier.gif" alt="Vider le panier" width="164" height="48" /></button>


2. Utiliser un input de type image, comme ceci :
<input id="btnAction" name="btnAction" type="image" src="images/boutons/vider_panier.gif" alt="Vider le panier" />


3. Utiliser un input de type submit, et via CSS, lui appliquer une image en background. Cependant, j'ignore s'il est possible d'appliquer cette image (un icone avec un texte dans l'image elle-même), et de faire disparaître le texte du bouton qui est contenu dans l'attribut "value" et ce, dans le but que les navigateurs ne supportant pas les CSS puissent afficher le texte du bouton.

La deuxième solution me semble plus simple, mais j'ai l'impression qu'un input image n'avait pas comme objectif de remplacer un bouton submit par une image, mais plutôt d'être utilisé pour une carte interactive par exemple. Après tout, ceci envoi les coordonnées X et Y cliquées par l'utilisateur.

J'aimerais avoir vos avis sur la question.
Merci et à bientôt ! Smiley smile
Modifié le 29 Dec 2004 - 21:07
Et un input tout con avec type="submit" et en feuille de style

background-image: url(adresse);
?
Modérateur
Donc, toi tu préfère la troisième solution ?

Imaginons que je prenne cette solution, et que l'image de remplacement pour le bouton ressemble à ceci :

[X Vider le panier]

Le texte est écrit directement dans l'image. Il fait partie du graphique. Si je met cette image en background, le texte du bouton qui se trouve dans l'attribut "value" se retrouve par-dessus l'image, ce qui tu en conviendras, ne fait pas très jolie et pratique, d'où la raison de mon questionnement. Si je ne met rien dans l'attribut "value", le navigateur écrit un texte par défault, comme Submit Query ; et si je met rien, ca risque d'être moins accessible non ?

J'attends vos réactions. Smiley smile
Bonjour,

voici plusieurs solutions pour cacher le texte d'un bouton input type="submit" :

1. appliquer un text-indent de -1000px, mais cette solution ne marche pas avec IE

2. appliquer un line-height: 1000px et imposer une hauteur, mais cette solution ne marche qu'avec IE

3. appliquer un line-height: 1000px, font-size: 0px, et imposer une hauteur. Cette solution semble fonctioner avec IE et Firefox.

Par contre avec opera 7.5 je n'ai pas trouvé de solution, mais la preview 7.6 (que je n'ai pas testée) semble un peu plus souple avec les input.

Enfin tu trouveras encore d'autres idées sur www.mezzoblue.com/tests/revised-image-replacement/
Modérateur
Bonjour,

Merci de vos réponses. Je suis allé consulter les solutions proposées. Je reste un peu sceptique face à ces solutions. J'ai commencé par essayé celle-ci :


<style type="text/css">
#logoclip {
position: relative;
height: 48px;
border:1px solid red;
}
#logoclip input {
background-image:url(images/boutons/vider_panier.gif);
background-repeat: no-repeat;
background-position: top left;
padding-left: 164px;
position: absolute;
clip: rect(auto, 164px, 48px, auto);
height: 48px;
}
</style>




<div id="logoclip">
	<input type="submit" id="btnViderPanier" name="btnViderPanier" value="Vider le panier" />
</div>


Il fonctionne bien dans Firefox, mais dans IE 6 SP2 je me retrouve avec un horrible et large bouton gris. Peut-être m'ais-je trompé dans le code ? Oh bien sûr, c'est accessible, mais comme la clientèle cible de mon application risque d'être sur IE, ca me pose un problème de conscience. Smiley smile Ais-je fais quelque chose de travers dans le code ? Au fait, mon image a 164px par 48px.

Je regarde d'autres applications du même genre, et je vois régulièrement l'utilisation d'un input type image pour remplacer un bouton submit par une image. Une ligne de code, et ca fonctionne partout. Évidemment, est-ce sémantique ? Je n'en sais rien, car comme je disais précédemment, ces inputs type image semblent avoir été créés pour des cartes interactives en renvoyant les coordonnées X-Y. Mais au-delà du fait que ce n'est (peut-être) pas sémantique d'utiliser un input type image, cela peut-il apporter de vraies problèmes d'accessibilité ?

Merci !
Administrateur
Blog de LD a écrit :
Le résultat est incorrect dans Internet Explorer 6.0 Windows en mode de rendu CSS Strict (Il est correct en revanche en mode Quirks). IE6.0 Win affiche cette partie de notre page sous la forme :

Copie d'écran dans IE6.0 Win: le texte n'est pas clipé

En effet, IE6 Win a la particularité de n'accepter la syntaxe la plus correcte de clip qu'en mode Quirks, et d'ignorer le clip ainsi rédigé en mode Strict. Heureusement, trois solutions s'offrent pour y remédier :

* N'employer que la syntaxe clip: rect(auto 300px 100px auto), comprise par IE dans les deux modes de rendus (ainsi que par les autres navigateurs). Elle est formellement valide en CSS2, mais déconseillée par la future CSS2.1 et donc non assurée d'être supportée par les navigateurs à venir ;
* Placer vos pages en mode Quirks dans IE6.0 Win avec la DTD HTML appropriée (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> en particulier), ou un prologue XML en XHTML... ce qui n'est pas toujours souhaitable par ailleurs ;
* Ou bien recourir à une astuce CSS consistant à doubler la règle clip sous la forme :

clip: rect(auto 300px 100px auto);
clip: rect(auto, 300px, 100px, auto);

o IE6.0 Win en mode Strict ne lira que la première règle et ignorera la seconde ;
o IE6.0 Win en mode Quirks, ainsi que les autres navigateurs testés (Opera 7.5x, Mozilla, FireFox, Safari, IE5 Mac, IE5.x Win) acceptent actuellement les deux règles ;
o Les navigateurs à venir respectant la future spécification CSS2.1 ne liront que la seconde règle.


Humm, tu as d'autres pistes :
http://blog-and-blues.org/weblog/2004/08/15/274-utiliser-clip-pour-masquer-du-contenu-de-maniere-accessible
Modérateur
Merci Raphael pour ton aide. Je vais peut-être paraître insistant sur ce point, mais j'aimerais bien savoir pourquoi je ne devrais pas utiliser simplement un <input type="image" src="monimage.gif" ... /> ? Ca semble beaucoup plus simple et sûr au niveau du rendu d'un navigateur à l'autre. J'aimerais bien avoir une opinion à ce sujet... Smiley rolleyes

Je réfléchis sur les différentes techniques, et si après vos opinions, je constate que l'utilisation d'un input type image n'est pas une bonne idée pour ma situation, je pense que je vais utiliser un bouton submit en lui mettant un background-image, et où le texte de l'image serait celui de l'attribut "value". Bref, je retirerais le texte du graphique pour ne garder que l'icône. Ca m'éviterait d'être obligé de cacher le texte du bouton.

Alors c'est cela, avant d'aller plus loin, j'aimerais avoir vos avis sur l'utilisation d'un input type image. (<input type="image" src="monimage.gif" ... />)

Merci encore une fois ! Smiley smile
Merkel a écrit :

Alors c'est cela, avant d'aller plus loin, j'aimerais avoir vos avis sur l'utilisation d'un input type image. (<input type="image" src="monimage.gif" ... />)

Merci encore une fois ! Smiley smile


Si tu obtiens le même rendu dans les différents navigateurs, pourquoi pas !

N'oublie pas l'attribut alt="" .
<input type="image" src="monimage.gif" alt="texte alternatif" />

http://www.la-grange.net/w3c/html4.01/interact/forms.html#adef-type-INPUT
Modifié le 11 Nov 2004 - 05:00
Modérateur
Salut,

C'est probablement cette solution que je vais adopter car je n'y vois pas vraiment d'inconvénients, et c'est la plus simple à mettre en place sans risque que les rendus soient différents. Bien sûr, je n'avais pas non plus mis de côté le alt, j'ai seulement fais court dans le code. Smiley smile

Je vais attendre quelques autres réactions à ce sujet avant de le marquer comme Résolu.

Sur ce, je vous souhaite une bonne nuit ! Smiley sleep
Modérateur
Puisque ce sujet n'attire plus de réponses, je vais en conclure que l'utilisation d'un input type image reste une solution valable pour personnaliser ses boutons submits.

Merci à tous ceux ayant participé à la discussion ! Smiley smile
Sujet clos
Aller à