// Image Check Box (15-11-2005) // by Vic Phillips http://vicsjavascripts.org.uk // The Script converts an existing Check Box to an Image Check Box // using function icbCBoxtoImgCB(....... // The image check box has images for the true and false conditions // The true or false conditions are reflected in a 'real' check box. // This allows standard techniques to be employed when submitting the form. // Verify the state against the same id/name // as the id of the original image/checkbox. // There may be a many image check boxes on a page as required. // Initialise the check boxes 'onload' of the page. // ie // // where // *id* = id of the image checkbox (string) // *state* = the initial condition (true or false ) // *ImageTrue* = the image to be displayed for the 'true' condition (string) // *ImageFalse* = the image to be displayed for the 'false' condition (string) // *width* = the width of the image (optional)(digits) // *height* = the height of the image (optional)(digits) // The function icbCheckBoxMoniter(icb) may be used to action external functions // the function is passed with the checkbox object when the checkbox checked state changes // All variables name ect are prefixed with 'icb' // to minimise conflicts with other javascripts. // Tested with IE6, NS7, MozillaFF and Opera7 function icbCheckBoxMoniter(icb){ //alert('CheckBox '+icb.id+' is '+icb.checked); } // No Need to Change var icbCursor='pointer'; if (document.all){ icbCursor='hand'; } function icbCBoxtoImgCB(icb,icbs,icbT,icbF,icbw,icbh){ // Create Image Element, Append Before the Check Box, Add OnClick Event & Load Correct Image icbNewImg=document.createElement('img'); icbNewImg.id='icb'+icb; icbcb=document.getElementById(icb); icbcb.parentNode.insertBefore(icbNewImg,icbcb); icbNewImg.style.cursor=icbCursor; if (icbw!=null&&icbh!=null){ icbNewImg.width=icbw; icbNewImg.height=icbh; } icbNewImg.cb=icbcb; icbNewImg.icbT=icbT; icbNewImg.icbF=icbF; icbNewImg.onclick=function(){ icbImgCBox(this); }; if (icbs){ icbNewImg.src=icbT; } else { icbNewImg.src=icbF; } // Hide the real Check Box icbcb.checked=icbs; icbcb.style.position='absolute'; icbcb.style.visibility='hidden'; } function icbImgCBox(icb){ if (icb.cb.checked){ icb.src=icb.icbF; icb.cb.checked=false; } else { icb.src=icb.icbT; icb.cb.checked=true; } icbCheckBoxMoniter(icb.cb); }