PDA

Click to See Complete Forum and Search --> : Large, Graphical checkboxes

BigLad
09-03-2003, 05:27 AM
Hi All,

I'm creating a set of webpages that will be used on a touchscreen system.

So far everything is fine apart from some checkboxes which are a bit too small to be used easily on a touchscreen environment.

do anybody have a example of some code that would allow me to use 2 graphics to represent a checkbox e.g one for unchecked and the other for checked?

obviously this needs to act in the same way as a normal checkbox etc and return a checked or unchecked value when the form is submitted.

I'm a bit of a JS n00b so please forgive me if this is a stupid question


Thanks in advance

Chris
Fang
09-03-2003, 06:20 AM
Swaps the image and updates a hidden field in the form:

<script type="text/javascript">
<!--
var box=[];
box[0]=new Image(20, 20);
box[0].src="images/off.gif";
box[1]=new Image(25, 20);
box[1].src="images/on.gif";

function SwapImage() {
if(document.boximg.src==box[0].src) {
document.boximg.src==box[1].src;
document.myform.cbox.value="on";
}
else {
document.boximg.src==box[0].src;
document.myform.cbox.value="off";
}
}
//-->
</script>

</head>
<body>
<form action="sendme.cgi" method="post">
<img src="images/off.gif" onclick="SwapImage();" width="20" height="20" name="box" alt="checkbox">
<input type="hidden" name="cbox" value="off" />
</form>

</body>
BigLad
09-03-2003, 10:47 AM
many thanks, that looks just perfect :cool: