[RESOLU] Reset et image en html

[Yooops Up]

Salut

Je voudrais savoir comment on fait pour mettre un image sur un bouton de type reset

Pour un submit, il faut écrire : <input type="image" src="image.jpg">

mais si je mais une source avec un type="reset", il ne l'accepte pas

Merci

[magnig]

bon je ne suis pas du tout spécialiste du HTML mais apparement comme tu l'a marqué pour mettre une image il faut que le type du bouton soit image

<input type="image" src="image.jpg">

or pour un reset c'est le type reset donc soit il existe un type qui combine les deux, soit il faut coder la remise à zéro des champs lorsque tu appuie sur ton bouton,

enfin je dit ça mais comme je l'ai marqué plus haut j'y connait rien en html

[Mephisto]

ce que tu peux essayer de faire, c'est de faire un lien du style :

<a href="lenomdelapagecontenantleformulaire.html"><img align="commetuveux" src="nomdetonimage.jpg" alt="reset"></a>

c'est vrai, comme fonction reset, c'et radical, mais je ne crois pas qu'on puisse introduire d'image e html pour les boutons <input>

[Soulfly_tribe90]

il faut effectivement mettre <input type="image" src="image.jpg"> pour mettre une image a un bouton.

Apres moi en general j'utilise du javascript pour passer ce que je veux en parametre :o avec la fonction onclick etc...

Sinon la deuxieme methode avec le href fonctionne nikel aussi :8

[jpriton]

Tu peux aussi créer des événements sur ton image dans ce genre:

<img src="mon_image" border="0" title="Effacer le formulaire" alt="Effacer le formulaire" onclick="document.form.reset;" onmouseover="this.style.cursor='pointer';">

[Nyro Xeo]

Voici une méthode propre, valide, qui fonctionne même si le JavaScript est activé, et qui n'a pas besoin d'un rechargement de la page... :

<button type="reset"><img src="TonImage.png" alt="Reset" /></button>

:)

Si tu veux qu'on ne voit que l'image (et non pas l'image dans un bouton), tu peux le rendre transparent grâce à du CSS :

button

{

background: transparent;

border: 0 none;

}

Comme quoi les solutions les plus simples sont toujours les plus simples :) (Et les mieux aussi puisque c'est bien plus propre que toutes les solutions proposées.)

[jpriton]

Nyro Xeo

Tellement propre qu'on ne voit pas l'info-bulle sous Firefox (manque l'attribut title et cursor: pointer dans le CSS.

J'utilise les évenements et CSS sur l'objet image directement:

.bouton {cursor: pointer;}

<img src="mon_image" class="bouton" title="Effacer le formulaire" alt="Effacer le formulaire" onclick="document.form.reset;">

Beaucoup plus simple et très propre

[Nyro Xeo]

Tellement propre qu'on ne voit pas l'info-bulle sous Firefox

Je ne vois pas l'utilité d'une infobulle ! Il faut que l'image soit assez explicite pour faire comprendre que c'est un bouton RESET (et je pense que c'est le cas), et pour les navigateurs textuels, l'attribut alt fait l'affaire.

Au pire, on peut très bien mettre l'attribut title sur le bouton :

<button type="reset" title="Réinitialiser le formulaire"><img src="TonImage.png" alt="Reset" /></button>

et cursor: pointer dans le CSS

Étant donné qu'il s'agit d'un bouton, la propriété cursor n'est pas nécessaire, vu que c'est déjà comme ça par défaut ^^

J'utilise les évenements et CSS sur l'objet image directement:

.bouton {cursor: pointer;}

<img src="mon_image" class="bouton" title="Effacer le formulaire" alt="Effacer le formulaire" onclick="document.form.reset;">

Beaucoup plus simple et très propre

C'est propre ça ???? Mais ça va pas, non !?

Utiliser du JavaScript alors qu'on peut très bien s'en passer en utilisant la solution que j'ai donné, c'est exagéré. Sachant que le JavaScript est à éviter autant que possible, alors si là je présente LA solution, faut pas s'acharner, non plus...

En plus, je ne trouve pas ça très simple. Ma méthode est simple puisqu'on ne fait que...

pour un reset c'est le type reset donc soit il existe un type qui combine les deux

...combiner les deux, en XHTML pur ! C'est-à-dire que j'utilise simplement les outils qui sont mis à ma disposition pour faire ce que voulait faire Yooops Up.

Mais "recréer" un bouton reset alors que ça existe déjà en HTML, c'est inutile, lourd, et pas très accessible.

[Mephisto]

lol, attention, ça parle propreté. Quels problèmes si "catastrophique" peut entraîner la mise en place d'un petit JS ? ^^

les deux solutions se vallent, mais je préfère quand même celle de jpriton, plus simple.

[Yooops Up]

Salut tt le monde,

Désolé pour le retard mais je n'est pas eu le temps de répondre ce week-end.

J'ai essayé les différentes versions et maintenant ca marche. J'ai du mettre celle de Nyro Xeo. Car j'ai une page avec des frames donc quand je tape document.form.reset, il effectue le reset sur toutes les frames or je ne le voulais que sur 1 seule.

Merci encore

A+

[Soulfly_tribe90]

Pourtant tu peux très bien effectuer le reset sur un seul des frame , il suffit de mettre dans ton script le target avec le nom de ton frame ou si tu executes ton script deja dans le frame ou tu veux faire ton reset tu met _self comme target et logiquement ca devrait fonctionner.

Mais si ca fonctionne très bien comme tu la fait et je n'en doute pas car c'est effectivement une bonne solution, garde celle ci. mais sache que tu pouvais le faire tout de meme de plusieurs facon voila.

[Yooops Up]

Merci Soulfly_tribe90, je m'en souviendrais pour la prochaine fois.

A+

[Nyro Xeo]

lol, attention, ça parle propreté. Quels problèmes si "catastrophique" peut entraîner la mise en place d'un petit JS ? ^^

les deux solutions se vallent, mais je préfère quand même celle de jpriton, plus simple.

Il ne s'agit pas de problème catastrophique. Ce n'est qu'un principe à suivre : on évite le JavaScript si on peut faire autrement, en XHTML/CSS.

Là c'est le cas, je vous présente une solution valide, qu'offre le (x)HTML.

De plus, je ne vois pas ce qui est compliqué. Au contraire; rien de plus simple ! D'habitude, pour un bouton, on ferait simplement :

<button type="submit">Envoyer</button>

Ou bien :

<button type="reset">Reset</button>

Ben là, au lieu de mettre du texte, je mets simplement une image :

<button type="reset"><img src="image.png" alt="Reset" /></button>

Avec un petit title, puisque jpriton a l'air de ne pas pouvoir s'en passer :

<button type="reset" title="reset"><img src="image.png" alt="Reset" /></button>

Ô mon dieu comme c'est compliqué !!! :/

Votre ""solution"" est mauvaise parce qu'elle utilise du JavaScript alors qu'on peut s'en passer. Et il faut penser à ceux qui n'ont pas (la possibilité d'avoir) le JavaScript. Eux, ils font comment ?

Vous allez me dire qu'ils sont peu, mais qu'est-ce que ça change ? Ils sont quand même là. Et puis répondre par cet argument, c'est quand même un peu stupide, avouez... (maintenant que j'ai dit ça, tu vas dire que c'est pas ce que t'allais dire :-P)

Je parle d'accessibilité ! Utiliser du JavaScript, que pas tout le monde ne peut avoir, pour effacer un formulaire, alors qu'il y a du (x)HTML, que tout le monde peut avoir, pour faire la même chose, c'est discriminatoire !

Et c'est du bidouillage pur : tu "recrées" un bouton pour effacer un formulaire alors que ça existe déjà...

Bref, mettre du JavaScript sur sa page, ça ne me pose pas de problème catastrophique, mais c'est presque anti-éthique.

Car j'ai une page avec des frames

Ah t'es pas au courant ? Les frames, c'est de la merde

http://www.openweb.eu.org/articles/finir_cadres/

[Soulfly_tribe90]

:clap: j'ai testé ta technique pour pas mourir con.

Ben ca te fait des boutons completement moche --> forcement ca crée un bouton de base submit ou bien reset et ca colle dessus une image.

Nous on proposait de beau bouton qui s'integre avec le fond de ta page et qui finalement font tout de meme plus "pro".

C'est bien facile ta technique mais c'est moche visuellement en tout cas je trouve.

Peut etre a t'il une technique pour rendre ca plus beau, en tout cas je l'espere :lol:

[Nyro Xeo]

:clap: j'ai testé ta technique pour pas mourir con.

Ben ca te fait des boutons completement moche --> forcement ca crée un bouton de base submit ou bien reset et ca colle dessus une image.

Nous on proposait de beau bouton qui s'integre avec le fond de ta page et qui finalement font tout de meme plus "pro".

C'est bien facile ta technique mais c'est moche visuellement en tout cas je trouve.

Peut etre a t'il une technique pour rendre ca plus beau, en tout cas je l'espere :lol:

http://www.pcinpact.com/forum/index.php?sh...ndpost&p=960936[/url]']Si tu veux qu'on ne voit que l'image (et non pas l'image dans un bouton), tu peux le rendre transparent grâce à du CSS :

button

{

background: transparent;

border: 0 none;

}

[Soulfly_tribe90]

Bon j'avais pas vu effectivement.

J'ai donc rajouté a mon metrics.css la ligne

.button

{

background: transparent;

border : 0 none;

}

Mais ca fonctionne pas pour autant... qu'est ce que j'ai fait de mal ???

[Nyro Xeo]

Si tu fais ".button", les propriétés CSS s'appliqueront aux classes "button" (donc par exemple <balise class="button">). Pour appliquer les propriétés aux balises <button> (et non aux classes), il faut mettre "button". Ce qui donne :

button /* "button" et pas ".button" */

{

background: transparent;

border : 0 none;

}

[Soulfly_tribe90]

:con: Ouai je comprend par contre ca doit etre autre chose parce que ca marche toujours pas.

Je vais chercher le pourquoi du comment.

[Nyro Xeo]

Oui tu as fait faux quelque part ^^

Si jamais : http://nyro.xeo.online.fr/SdZ/code.php?action=1&id=37 Au cas où tu voulais voir un exemple...