CHECKBOX PERSONNALISABLE

Commentaire de J_G le 12/09/2005 18:50:14

Salut,

pas mal... non, BIEN ;)

Mais :
au lieu d'inclure ton input-image dans une ancre (<a>...</a>) 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,

Commentaire de J_G le 19/09/2005 19:01:59

<?php
/*
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 = "<input type=\"checkbox\" name=\"$name\" id=\"$name\" value=\"$value\" $check style=\"display:none;\" />";
        //              l'image qui remplace la checkbox
        $out.= "<img src=\"$img\" onclick=\"$JS\" />";

        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 : <br />
<br />
<?=$myCheckbox->add('travail',true)?> Je souhaite partir à la retraite le jour de mes 25 ans<br />
<?=$myCheckbox->add('retraite')?> Je souhaite travailler toute ma vie<br />
<br />
Et voilà, demain j'essaye une solution "tout CSS" ;)<br />
<br />
A+