Forum Moderators: open
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box { width : 2em;
height :2em;
}
</style>
<script language="JavaScript">
function change(){
document.getElementById("box").style.width = "0.7em";
document.getElementById("box").style.height = "0.7em";}
</script>
</head>
<body>
<div id ="box" onMouseOver="change()"><input type="checkbox" name="checkbox" class = "box" value="checkbox"></div>
</body>
</html>
in your css will affect anything that has: class="box"
try changing it #box
n.b. you havent said what problem your actually having, so ive no idea if this will help
The containing div: id="box"
The checkbox: class="box"
The stylesheet rule (.box) applies to the checkbox,
whilst the scripted style changes, in fn change, apply to the div element.
If you give the div a visible border, you'll see that that the dims of the div are affected when you mouseover. I guess that's not what you're after.
style -> size 1em
onload -> javascript function(change size to .6em)
I am thinking that the function needs to be along the like of
function change(){
document.getElementByTagName("input").style.width = "0.6em";
document.getElementByTagName("input").style.height = "0.6em"; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.box { width : 1em;
height :1em;
}
</style>
<script language="JavaScript">
function changeCheckboxes() {
// find all input controls:
var els=document.getElementsByTagName("input");
// for each input element...
for(var i=0; i < els.length; i++) { if (els[i].type=='checkbox') { // its a checkbox
// change size
els[i].style.width= ".6em";
els[i].style.height=".6em";
}
}
}
</script>
</head>
<body LANGUAGE=JavaScript onload ="changeCheckboxes()">
<table border="1">
<tr>
<td><input type="checkbox" name="checkbox" class = "box" value="1"></td>
<td><input type="checkbox" name="checkbox" class = "box" value="2"></td>
<td><input type="checkbox" name="checkbox" class = "box" value="3"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" class = "box" value="4"></td>
<td><input type="checkbox" name="checkbox" class = "box" value="5"></td>
<td><input type="checkbox" name="checkbox" class = "box" value="6"></td>
</tr>
</table>
</body>
</html>
