Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

can i make a smaller checkbox 1

Status
Not open for further replies.

ghorr

Programmer
Sep 16, 2002
29
RO
i need a checkbox inside a table but i want it to be smaller than the normal checkbox ... can it be done?
 
Use a tiny, tiny GIF. Add an onClick event to it, such that its image is toggled with that of the same checkbox, but in a different state.

Cheers,


[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
okay... that would be pretty cool but unfortunately i don't know jscript ... can anyone pls show me an example ?
 
Ghorr,

Try this!

Code:
<HTML>
<HEAD>
  <SCRIPT LANGUAGE=&quot;JavaScript&quot;>
    function toggle() {
      var is_checked = window.document.form_1.check_1.checked;
      if (is_checked == true) {
        window.document.form_1.check_1.checked = false;
        document.images['chkBox1'].src='unchecked.gif';
      } else {
        window.document.form_1.check_1.checked = true;
        document.images['chkBox1'].src='checked.gif';
      }
    }
  </SCRIPT>  
</HEAD>
<BODY BGCOLOR=&quot;#FFFFFF&quot; TEXT=&quot;#000000&quot; LINK=&quot;#0000FF&quot; VLINK=&quot;#800080&quot; ALINK=&quot;#FF0000&quot;>
  <H1>CheckBox with image</H1>
  <FORM NAME=&quot;form_1&quot; ACTION=&quot;something.php&quot; METHOD=&quot;POST&quot;>
    <A HREF=&quot;#&quot; onClick=&quot;javascript:toggle();&quot; STYLE=&quot;text-decoration:none;&quot;>
      <IMG SRC=&quot;unchecked.gif&quot; BORDER=&quot;0&quot; NAME=&quot;chkBox1&quot;>  
      <INPUT TYPE=&quot;checkbox&quot; NAME=&quot;check_1&quot; STYLE=&quot;display ='none';&quot;>Check me!
    </A><BR><BR>
    <INPUT TYPE=&quot;submit&quot; VALUE=&quot;Continue ...&quot;>
  </FORM>
</BODY>
</HTML>

Good luck §;O)


Jakob
 
feh ... this works too
<input type=&quot;checkbox&quot; style=&quot;width:10px;height:10px;&quot;>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top