Discussion :

[Isalyn]

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 :

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

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

[SpaceFrog]

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

[Isalyn]

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

Code :

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

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;
}

[kernelfailure]

Et ça ? :

Code :

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

<input type="image" ... >

[SpaceFrog]

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é ...

[kernelfailure]

...
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 :

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

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

[SpaceFrog]

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

[Isalyn]

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

[kernelfailure]

Pas chez moi (FF et IE7).

Code :

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

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

[RomainVALERI]

Quelque chose comme ça probablement :

Code html :

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

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

et CSS

Code css :

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

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

edit :

@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

[Isalyn]

@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

[SpaceFrog]

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

[Isalyn]

@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

[SpaceFrog]

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