Des checkbox en image via javascript, c'est possible ?

Bonjour tout le monde,

Alors voilà je voulais savoir s'il était possible de remplacé un checkbox (vide et coché quand on a cliqué dessus) par deux images (une quand il est vide et une autre qaund il est coché).

J'ai vu sur le net en cherchant sur google:

<INPUT TYPE="image">

Mais apparemment c'est pour le bouton SUBMIT et je ne sais pas trop comment faire avec l'histoire des deux images (coché ou non coché). Je pense qu'il faut passer par une feuille de style en CSS.

Mais je sais pas trop comment car on va devoir définir la css d'input et donc tous les champs input seront modifiés. Ou est-il possible de faire un CSS pour INPUT CHECKBOX ? Si oui comment ?

Je suis peut-être pas sur la bonne piste non plus, alors si vous savez comment faire ou bien des conseils n'hésitez pas.

Merci beaucoup
Modifié par Martelinho10 (17 Jul 2005 - 13:31)

Ce n'est pas possible via CSS. Il faut un code javascript pour arriver a tes fins.

Salut !
Je ne comprends pas très bien ton problème, si tu souhaites simplement cocher une case, alors il suffit d'utiliser l'attribut checked comme ceci :

<input type="checkbox" [i]checked[/i] />

Si tu veux simplement modifier l'apparence d'un input, tu peux faire ceci en Css (ici j'ai pris submit comme exemple) :

input[type=submit] {
	[i]propriétés...[/i]
}

Voila, si le problème se situe autre pars, alors merci d'être un peu plus explicite


Bonne après-midi
Modifié par Gaylord.P (17 Jul 2005 - 13:00)

Tout d'abord, tu as répondu en parti à mon problème surtout au niveau CSS où je vais pouvoir m'en sortir avec ce que tu m'as donnée. Pour la suite, en fait qaund on coche un checkbox on a un "tic" et moi je voudrais dans un premier temps que la checkbox soit une image (donc je vais faire avec les CSS) et quand on coche que ce ne soit pas un "tic" mais une deuxième (autre) image.

Voilà je sais pas si c'est plus explicite

Ce n'est pas possible hein ...
Il faut du javascript ... je le repete car j'ai l'impression que mon commentaire est passé inapercu

En effet ton post je l'ai pas vu. Désolé. Et en javascript (ce n'est pas mon trop mon domaine ) Tu as pas un lien ou autre bout de code pour que je puisse comprendre comment faire

Merci beaucoup

Comme indiqué rapidement par afbilou, ce n'est pas faisable via CSS2.

Tu peux effectivement modifier l'apparence d'un contrôle de formulaire via les sélecteurs CSS du type input[type=...]. Mais il s'agit essentiellement des couleurs, bordures, etc. Le remplacement fiable par deux images est hors de portée de CSS2. Il ne faut pas oublier qu'à la différence des éléments de formulaire, les contrôles de formulaires sont intimement liés à l'OS. CSS n'a actuellement qu'une action limitée sur eux.

Tu peux le faire via javascript, mais avec précautions sur l'accessibilité :
- le formulaire doit marcher sans javascript
- le formulaire doit marcher avec javascript et images désactivées
- l'accès au formulaire via le clavier ne doit pas être empêché
- la lecture du formulaire par un lecteur d'écran doit être possible.

Oui, c'est frustant. Pour te consoler, dis-toi que tu n'est pas le seul à être frustré par le peu de capacités du HTML4.01 en matière de formulaires graphiques : c'est à tel point que c'est l'une des raisons pour lesquels des impatients comme la fondation Mozilla, Opera, Safari, etc. se sont lancés dans la création d'un nouvelle version de HTML : HTML5.0

<edit>au cas où : précisons qu'HTML5.0 n'existe actuellement que sur le papier, n'est pas utilisable, et ne le sera peut-être bien jamais</>
Modifié par Laurent Denis (17 Jul 2005 - 13:24)

@Laurent Denis

Tu me proposerais quoi pour mon problème

Ayant défini le cahier des charges, je cède prudemment la place aux experts-mécaniciens du DOM
Ils ne devraient pas tarder à se manifester, je pense. Peut-être peux-tu modifier le titre de ton sujet pour qu'il soit plus explicite ? Par exemple : Des checkbox en image via javascript, c'est possible ?

j'ai changé le titre, je pense qu'on va le dépalcer dans la catégorie plus appropriée

C'est fait (merci de me l'avoir rappelé )

Pas de soucis. En espérant que j'aurais une aide et une réponse à mon problème

Et hop :

http://www.ibilab.net/webdev/articles/Javascript/personnalisez-checkbox-radiobutton-8.htm

Résultat :
http://www.ibilab.net/webdev/exemples/checkbox_personnalise.htm
Modifié par Olivier (17 Jul 2005 - 13:49)

Ah je vais avoir de la lecture. Mais ca m'a l'air parfait Si j'ai un problème je le pose ici. En tout cas, merci pour la vitesse réponse.

Attention : voici l'inspecteur des travaux pas finis :

- pas de problème si javascript est désactivé

- c'est loupé pour la combinaison javascript activé + images désactivées : j'ai le mot "image" à la place du checkbox, dans les deux cas. Peut-être "Case cochée" et "Case décochée", à la place ?

- accès clavier catastrophique. La tabulation me fait sauter les 3 premiers checkbox et ne me permet que d'activer "test d'envoi"

- pas le temps de tester dans les lecteurs d'écran.

Mais la piste a l'air bonne
Modifié par Laurent Denis (17 Jul 2005 - 14:01)

j'ai fait ca : c'est ici
Ce n'est pas fini mais c'est un début deja fonctionnel.

Ca marche avec ou sans javascript.
Par contre pour ce qui est des images acceptées ou non ... ca ne fonctionne pas encore (normalement ca devrait puiske je change l'attribut alt des images). Je me pencherai dessus une autre fois.

Pour le reste tabulation et compagnie je ne l'ai pas fait ... mais ca laisse quand meme une piste.

L'avantage de mon code c'est qu'il ne pollue pas du tout le code HTML
Modifié par afbilou (17 Jul 2005 - 15:14)

Etrange, sur mon navigateur (Mozilla Firefox 1.0.4 / Windows XP sp2) lorsque je coche une case, si je décoche je ne peux pas recocher après.

J'avous ne pas avoir réellement de connaissance en Javascript, je ne peux donc pas dire d'où provient le problème.
...mais il y a bien un problème

Ah, une chose : pour ne pas ruiner ton bel effort d'accessibilité (bravo ), il faut revoir la structure de tes <label><input...

Tu utilises ce qu'on appelle des labels implicites:

- l'input est dans le label
- l'input n'a pas d'attribut for= et l'input n'a pas d'attribut id

<label><input type="checkbox" name="mycheckbox1" /> : Cochez moi [lol]</label>

Cette syntaxe ne sera pas reconnue par différents navigateurs, et lecteurs d'écran. la WCAG2.0 ne reconnaîtra bientôt officiellement plus que l'usage des label explicites

<label for="mycheckbox1">Cochez moi [lol]</label> : <input type="checkbox" name="mycheckbox1" id="mycheckbox1" />

- le label et l'input ne sont plus imbriqués
- ils sont associés par la même valeur de leur attribut for= et id

HTML4.01, etc. admet les deux syntaxes, et recommande d'ailleurs également la seconde.

<edit>(l'ordre avant/après du label et de l'input n'est pas déterminant)</>
Modifié par Laurent Denis (17 Jul 2005 - 15:24)

Gaylord.P a écrit :

...mais il y a bien un problème

Ma foi, oui :
- pas de problème dans Opera 8, c'est nickel
- Dans FireFox, mêmes conditions que toi, un coup je peux cocher et décocher, un coup je ne peux pas décocher, un autre, je coche sans pouvoir décocher.
- Dans IE6.0, seule l'image de la première checkbox s'affiche, à côté du checkbox

Non non c'est juste un copier/coller sans verification
Je ne savais meme pas qu'on pouvait omettre l'attribut for a vrai dire

Par contre d'apres : http://giminik.developpez.com/xhtml/label.html l'element label peut contenir un input ... donc pourkoi pas l'input auquel il fait reference ?

En fait ca simplifie les chose parce que je me sers du label comme un parent de l'input que je masque et remplace par une image. Mais au dela de l'aspect pratique que ca represente, en quoi englober un input dans un label serait deconseillé ?