[JS] Transformer bouton appelant du js en image

N'ayant reussi qu'a trouver des reponses purement html/css sur ce probleme qui ne fonctionne pas donc je m'en remets au forum Javascript

Mon probleme est simple, j'ai plusieurs boutons de formulaire faisant appel a des fonctions Javascript que j'aimerais afficher a l'aide d'images plutot que par de simples boutons.

J'ai essaye de differentes manieres sans succes (balises image, type="images", modifications du css)

Voici mes boutons :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<form> <p><input type="button" onclick="pause();" value="Pause"/></p> </form>       <form>   <select name="vitesse" id="val"> <option value="1">1</option> <option value="2">2</option> </select>   <p><input type="button" onclick="speed();" value="Changer la vitesse"/></p> </form>

---

Merci de votre aide

Cordialement
Isalyn

heu ben un background-image sur tes bouton suffirait non ?

J'ai deja essaye ce genre de choses en les mettant dans une div de ce style sans succes

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="myButton"> <form> <p><input type="button" onclick="pause();" value="Pause"/></p> </form> </div>   CSS div.myButton { background:url("images/xx.jpg") no-repeat; border: solid 1px ; height:10px ; width:10px; }

---

Et ça ? :

Code:

---

<input type="image" ... >

---

mets le class au bouton ! pas au div !!!

le souci de l'inout type image est qu'il reagit comme un submit ce qui n'est peut etre pas l'effet souhaité ...

Citation:

---

Envoyé par SpaceFrog

...
le souci de l'input type image est qu'il reagit comme un submit ce qui n'est peut etre pas l'effet souhaité ...

---

Ca devrait bloquer le submit :

Code:

---

...onclick="...; return false">

---

oui mais ça declenche un submit sur appui de la touche entrée ...

Tu penses qu'il faudrait que j'applique la classe a la balise input ?

Cote code ca rendrait comment ? Je t'avoue que je suis un peu perdu cote CCS

Pas chez moi (FF et IE7).

Code:

---

1 2 3 4 5 6 7 8 9

var frm = document.createElement('FORM'); var btn = document.createElement('INPUT'); btn.setAttribute('type','image'); btn.setAttribute('src','file://localhost/C:/....jpg'); btn.setAttribute('onclick',"alert('ok'); return false");   frm.appendChild(btn); document.getElementsByTagName('BODY')[0].appendChild(frm); btn.onclick = function () { alert('ok'); return false } //IE pas aimer setAtrribute onclick

---

Quelque chose comme ça probablement :

Code:

---

1 2 3

<form> <p><input type="button" onclick="pause();" value="Pause" class="myButton"/></p> </form>

---

et CSS

Code:

---

1 2 3 4 5 6

input.myButton { background:url("images/xx.jpg") no-repeat; border: solid 1px ; height:10px ; width:10px; }

---

edit :

Citation:

---

@RomainVALERI

Je viens de tester ta solution

---

Heu... c'est SpaceFrog qui a proposé cette solution : j'avais l'impression qu'un exemple plus concret te serait utile ^^ donc merci à lui ;)

@RomainVALERI

Je viens de tester ta solution et il semble que cela fonctionne, il me reste a tester si les fonctionnalites JavaScript ne sont pas trouble par ce changement.

@Tout le monde

Merci beaucoup pour votre aide a tous meme si ce probleme ne relatant pas vraiment de JavaScript.

Cordialement

c'est la solution que je t'avais proposée plus haut et celle qui perturbera pas du tout le fonctionnement javascript.
Faudra juste faire attention aux dimensions de l'image et de l'input

@SpaceFrog

Tout a fait je t'avais mal compris et j'avais applique le background image a la div qui contenait le bouton et non a l'input.


Merci encore

résolu ?
si oui jette un oeil à ma signature ;)