By Anonymous (not verified) on

Hi !
Could anybody help me with the creation of a new module to replace the radio buttons and checkboxes with custom images ?

I have the javascript ready to work but I don't know how to put it in a Drupal module. I've found this tutorial http://drupal.org/node/42544 but.... well I'm not so good with php :)

So here's the script


function chgCB(){
  CHKB = document.getElementById('newCB').getElementsByTagName('input');
  for(i=0; i < CHKB.length; i++){
    if(CHKB[i].type == "checkbox"){
      IMG = document.createElement('img');
      CHKB[i].parentNode.insertBefore(IMG, CHKB[i]);
      IMG.src = "radio0.gif";
      if(CHKB[i].checked  == true) IMG.src = "radion.gif";
      if(CHKB[i].disabled == true) IMG.src = "radio.gif";
      else{ // Changing state's behaviours are only applied if the box is clickable
        CHKB[i].onchange = function(){
          IMG = this.parentNode.getElementsByTagName('img')[0];
          if(this.checked == true) IMG.src = 'radion.gif'
          else IMG.src = 'radio0.gif'
        }
        if(!window.sidebar){
          CHKB[i].parentNode.onclick = function(){
            CHK = this.getElementsByTagName('input')[0];
            CHK.checked = (CHK.checked == true) ? false : true;
            CHK.onchange()
          }
        }
      }
      CHKB[i].style.visibility = 'hidden';
      CHKB[i].style.position   = 'absolute';
    }
  }
}

function chgRB(){
  CHKB = document.getElementById('newRB').getElementsByTagName('input');
  for(i=0; i < CHKB.length; i++){
    if(CHKB[i].type == "radio"){
      IMG = document.createElement('img');
      CHKB[i].parentNode.insertBefore(IMG, CHKB[i]);
      IMG.src = "radio0.gif";

      IMG.id = 'img'+CHKB[i].id;
      IMG.relation = CHKB[i].name;

      if(CHKB[i].checked  == true) IMG.src = "radion.gif";
      if(CHKB[i].disabled == true) IMG.src = "radio.gif";
      else{ // Changing state's behaviours are only applied if the box is clickable
        CHKB[i].onchange = function(){
 
          IMG = document.getElementById('newRB').getElementsByTagName('img');
          for(i=0; i < IMG.length; i++){
            if(IMG[i].relation != this.name) continue;
            if(IMG[i].src.indexOf('radio.gif') != -1) continue;
            if(IMG[i].id == 'img'+this.id) IMG[i].src = 'radion.gif';
            else IMG[i].src = 'radio0.gif'
          }

        }
        if(!window.sidebar){
          CHKB[i].parentNode.onclick = function(){
            CHK = this.getElementsByTagName('input')[0];
            CHK.checked = (CHK.checked == true) ? false : true;
            CHK.onchange()
          }
        }
      }
      CHKB[i].style.visibility = 'hidden';
      CHKB[i].style.position   = 'absolute';
    }
  }
}

I hope you can help me ;)

Thanks a lot :)
Matt

⋅ Categories: Drupal 4.7.x

Comments

Anonymous’s picture

Anonymous (not verified) commented

Maybe you have a better script to replace these ugly browser buttons ? :)

erdemkose’s picture

erdemkose commented

Save your Javascript function to a file like relative/path/to/script.js and then try this module...

// $Id: change_RB_CB.module,v 0.01 2006/04/08 03:12:24 erdemkose Exp $

/**
 * @file
 * Replaces the radio buttons and checkboxes with custom images
 */

/**
 * Implementation of hook_help().
 */
function change_RB_CB_help($section) {
  switch ($section) {
    case 'admin/help#change_RB_CB':
      $output = '<p>'. t('Replaces the radio buttons and checkboxes with custom images.') .'</p>';
      return $output;
    case 'admin/modules#description':
      return t('Replaces the radio buttons and checkboxes with custom images.');
  }
}

/**
 * Implementation of hook_onload().
 * Registers onload functions
 */
function change_RB_CB_onload() {
  return array('chgCB(); chgRB()');
}

/**
 * Implementation of hook_menu().
 * Adds Javascript file to the header
 */
function change_RB_CB_menu($may_cache) {
  if ($may_cache) {
    drupal_add_js('relative/path/to/script.js');
  }
}

Sorry I can't try it because I don't have a test installation right now.

--------------------------------------------------------------
http://www.students.itu.edu.tr/~koseer/drupal/ - works on PHP-TXT-DB database layer.

Anonymous’s picture

Anonymous (not verified) commented

Erdemkose, It's really nice to have done this :)
I'm gonna try it right now :)

Thanks a lot ;)
I'll tell on this post if it works

Thanks again ;)

Anonymous’s picture

Anonymous (not verified) commented

Well, the javascript doesn't work. Does anybody have one that work fine with drupal please ?

Thanks ;)

Matt

PS /// I don't know Flash but maybe it's possible to replace the radio buttons and checkboxes with flash ? What do you think about that ? ;)

Anonymous’s picture

Anonymous (not verified) commented

http://www.easy-designs.net/articles/replaceSelect/

No problems with this one for the 'select' inputs ;)

Just have to deal a bit with CSS...

be carefull with the height of the 'select'; It may cause problems under Drupal....
Forget it and try to play with the margin and padding ;)