Discussion :

[kevinf]

Bonjour,

j'aimerai mettre un input checkbox avec des images personnelles.

Y aurait-il un moyen très simple de le faire sans JavaScript?

Merci

[Zwiter]

??
Precise ce que tu veux faire

[kevinf]

Et bien, j'ai ca :

Code :

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

<input type="checkbox">

Au lieu d'avoir les visuels standars, je voudrais voir ca :


et


Merci

[Zwiter]

A ma connaissance, pas de checkbox dont on pourrait changer le fond par une image.
Par contre, j'imagine bien un autre moyen : d'utiliser des images qui s'alternent via un onlick sur elles memes.
Z.

[kevinf]

Moi j'aimerai un truc vraiment très court et super simple, tu pourrais me montrer un exemple ?

Merci

[Zwiter]

Code :

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

1
2
3
4
5
function toggleBox() {
	if (document.box1.src == 'http://img58.imageshack.us/img58/2257/btnuncheckedaq6.png')
		document.box1.src = 'http://img170.imageshack.us/img170/6725/btncheckedby9.png';
	else document.box1.src = 'http://img58.imageshack.us/img58/2257/btnuncheckedaq6.png';
	}

Code :

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

<img src="http://img170.imageshack.us/img170/6725/btncheckedby9.png" id="box1" onclick="toggleBox()" />

[kevinf]

Je ne sait pas pourquoi, mais ca ne marche pas, j'ai :

document.box1.src à la valeur Null ou n'est pas un objet

Et il faudrait aussi, que lors de l'envoi du formulaire en fonctione si c'est coché ou non, envoyé "on" ou "off".

[Zwiter]

on ou off en variable post, ou get?

Le script ci-dessus marche parfaitement sous opera, ff et safari (les dernieres versions)

[kevinf]

Donc, en variable _POST,
et effectivement, il marche partout sauf IE, mais j'aimerai qui marche au moins sous IE et FF

Merci encore.

[kevinf]

Donc, en mettant cela :

Code :

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

1
2
3
4
5
function toggleBox() {
	if (document.getElementById('box1').src == 'http://img58.imageshack.us/img58/2257/btnuncheckedaq6.png')
		document.getElementById('box1').src = 'http://img170.imageshack.us/img170/6725/btncheckedby9.png';
	else document.getElementById('box1').src = 'http://img58.imageshack.us/img58/2257/btnuncheckedaq6.png';
	}

Ca fonctionne sur tous les navigateurs, il me manque juste la variable a faire passer, mais ca je ne sait pas...

Merci again

[Zwiter]

tu as qu'a cree un vrai input pour ta variable, en hidden, et changer sa valeur en meme temps qu'en changeant l'url de l'image.

[kevinf]

Ok, donc j'ai rajouter ce champ :

Code :

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

<input type="hidden" name="retenir" value="oui" id="box2"/>

Et j'ai modifié le code :

Code :

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

1
2
3
4
5
6
7
function toggleBox() {
	if (document.getElementById('box1').src == 'images/divers/checkbox_off.png')
		document.getElementById('box1').src = 'images/divers/checkbox_on.png';
		document.getElementById('box2').value = 'oui';
	else document.getElementById('box1').src = 'images/divers/checkbox_off.png';
		document.getElementById('box2').value = 'non';
	}

Mais là, plus rien ne fonctionne...

[Zwiter]

http://sergep.developpez.com/tutorie...e=page_2#LII-A

[kevinf]

Ok, désolé, mais je ne suis pas très à l'aise avec le JavaScript,

mais un grand merci à toi pour ton aide