11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour

je souhaite pouvoir ajouter une icone dans un <span> a coté d'un boutton <input> mais je n arrive pas a faire que cette icone clickable effectue la meme action que le "input" en jquery


<form>
.....
<div>
<input id="btn-add" type="button" value="Add" />
<span class="sprite sprite-add-btn"></span>
</div>
.....
</form>


j utilise un span car l image est un sprite et le span me sert de crop pour cette image, c est pour cela que je ne peux pas mettre directement l image en background du input. et comme j essaie de rendre ca compatible avec certains navigateur de l ancienne epoque, je ne peux pas utiliser les :after comme crop ...

Auriez vous une idée par hasard.
Merci d'avance.

en gros il s agit de deux liste et entre les deux, j ai ces bouttons qui me permettent de faire passer un item dune liste a l autre.
Modifié par fredconv (27 Mar 2012 - 14:44)
Hello.

Plutôt qu'un input[type=button], utilise un bon vieux <button>.
Autre chose, si ton icône n'est là que pour la déco, préfère un pseudo-élement :before au span en plus.
Florian_R a écrit :
Hello.
préfère un pseudo-élement :before au span en plus.


Salut.
Merci pour la reponse rapide.
Malheureusement, comme je le disais précédemment, il faut que cette solution soit compatible avec des "vieux" navigateur du genre ... IE7 ... donc pas de pseudo-élement before aou after . et donc le span me semblait tout indiqué et comme pour l image, il s agit non pas d'une petite icone seule mais d'un crop sur un sprite plus grand, je ne peux pas simplement utiliser la propriété css background sur le bouton...
Donc à vot' bon coeur msieur dames Smiley smile

Le problème reste: comment faire pour que l image qui est dans le span prenne les même propriétés que le bouton qui le précède ? (a savoir le clic et l'action qu il y a derrière) en jquery

pour le clic je vois mais pour recuperer l'action .. je cale .

Merci d avance
Modifié par fredconv (27 Mar 2012 - 13:58)
J'avais lu ton post un peu vite, désolé. Mais ma remarque reste valable, si l'image ne sert que de déco, on tombe dans l'amélioration progressive si elle n'est pas servie pour IE6 et IE7. A voir selon le degré de support nécessaire.

Et sinon, comme je te disais précédemment :
<button><span class="sprite sprite-add-btn">Add</button>

Modifié par Florian_R (27 Mar 2012 - 14:08)
.... Smiley eek parfois on cherche à faire compliqué quand on peut faire simple * ...
Merci pour ton aide. J'avais zappé la partie <button> ....

*note pour plus tard : relire les bases du html .... Smiley cligne