CHECKBOX PERSONNALISABLE
wizard512
Messages postés
459
Date d'inscription
dimanche 9 janvier 2005
Statut
Membre
Dernière intervention
11 mai 2013
-
10 sept. 2005 à 11:06
cs_lanner Messages postés 131 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 8 avril 2015 - 10 déc. 2008 à 18:42
cs_lanner Messages postés 131 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 8 avril 2015 - 10 déc. 2008 à 18:42
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/33710-checkbox-personnalisable
https://codes-sources.commentcamarche.net/source/33710-checkbox-personnalisable
10 déc. 2008 à 18:42
16 févr. 2008 à 21:06
function draw_image_checkbox($name,$img1,$img2,$valOff,$valOn,$checked=false){
$value = $checked==true ? $valOn : $valOff;
$firstImg = $checked==true ? $img2 : $img1;
return ''.'';
}
19 sept. 2005 à 19:01
/*
SALUT f6xara,
Bien sûr que si on peut cliquer sur une image !!!
Tout les éléments HTML acceptent l'action "onclick".
Vois donc comment j'aurais fait ton code...
(Ne le prend surtout pas mal)
*/
// Pourquoi une classe ?
// Ainsi, on peut créer plus sieur type de checkboxes personnalisées
// (DEs bleux, des rouges, ...) et les ajouter selon ses gouts
class checkbox {
// Source des images
var $img_check;
var $img_uncheck;
// On instancie la classe en déclarant les images. Ainsi elle seront répétées
function checkbox($check_img_src, $uncheck_img_src) {
$this->img_check = $check_img_src;
$this->img_uncheck = $uncheck_img_src;
}
// Fonction pour ajouter une checkbox
// * $name : attributs 'name' et 'id' de l'éléments HTML checkbox qui sera créé
// * $checked : état initial de la checkbox (attribut 'checked')
// * $value : attribut 'value' de l'éléments HTML checkbox qui sera créé
function add($name, $checked=false, $value='OK') {
// prédéfinition des attributs de la checkbox
$check = $checked ? 'checked=checked' : '';
$img = $checked ? $this->img_check : $this->img_uncheck;
// Préformatage du code javascript
$JS = "if(document.getElementById('$name').checked==true) {" ;
$JS."this.src '$this->img_uncheck';" ; // on modifie juste l'image affichée
$JS.= "} else { " ;
$JS."this.src '$this->img_check';" ;
$JS.= "}" ;
// inversion de l'attribut checked de la "vraie" checkbox
$JS."document.getElementById('$name').checked !document.getElementById('$name').checked;" ;
// Preformatage de la sortie :
// la "vraie" checkbox (cachée)
$out = "";
// l'image qui remplace la checkbox
$out.= "";
return $out; // et on envoi la sauce !
}
}
$myCheckbox = new checkbox('checked.gif','non_checked.gif');
?>
Et voici comment tu l'intègres dans ton code HTML :
<?=$myCheckbox->add('travail',true)?> Je souhaite partir à la retraite le jour de mes 25 ans
<?=$myCheckbox->add('retraite')?> Je souhaite travailler toute ma vie
Et voilà, demain j'essaye une solution "tout CSS" ;)
A+
19 sept. 2005 à 11:53
La balise input est en hidden, on ne la voit pas car elle est remplacée par une image. Donc on ne peut pas cliquer dessus.
Donc on doit cliquer sur une image ou un texte (voir plus) et pour ces deux éléments, la facon que je trouvait la plus logique est avec
:)
12 sept. 2005 à 18:50
pas mal... non, BIEN ;)
Mais :
au lieu d'inclure ton input-image dans une ancre (...) et d'utiliser href="javascript:...". Je te conseil d'utiliser directement les évènements onclick, ondblclick, etc. de la balise input.
De plus, je me demande si ce que tu fais n'est pas faisable en feuille de style (*.css). A confirmer!
6/10
Continue bien,
10 sept. 2005 à 11:06
Bien ta source et ton site :)