bulg
04 Mar 2009, 02:05 AM
This is a school project and i cant figure out why my radio buttons dont work... iam sure its something stupid that iam missing...
i have 3 pics and after choosing a radio button the pic should change. they are on top of eachother so the one thats picked gets on top and so on... so you keep picking which one goes on top.
here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-IS"
xml:lang="en-US">
<head>
<title>Assignment 6 part 1</title>
<script type = " text/javascript">
<!--
var dom = "saw";
function toTop (newTop)
{
domTop = document.getElementById(top).style;
domNew = document.getElementById(newtop).style;
domTop.zIndex = "0";
domNew.zIndex = "10";
top = newTop;
}
//-->
</script>
<style type = "text/css">
.tool1 {position:absolute; top:30%; left:40%; z-index:0;}
.tool2 {position:absolute; top:30%; left:40%; z-index:0;}
.tool3 {position:absolute; top:30%; left:40%; z-index:0;}
</style>
</head>
<body>
<p><img class = "tool1" id = "saw" src="/tools/saw.jpg" alt="saw"
height="248" width="364" /></p>
<p><img class = "tool2" id = "pliers" src="/tools/pliers.jpg"
alt="pliers" height="248" width="364"/></p>
<p><img class = "tool3" id = "trimmer" src="/tools/tree_trimmer.jpg"
alt="trimmer" height="248" width="364" /></p>
<form id = "myForm" action ="">
<p>
<input type = "radio" name = "newTop" value ="1" onclick =
"toTop('tool1')"/> saw
<br />
<input type = "radio" name = "newTop" value ="2" onclick =
"toTop('tool2')"/> pliers
<br />
<input type = "radio" name = "newTop" value ="3" onclick =
"toTop('tool3')"/> trimmer
<br />
</p>
</form>
</body>
</html>
Thank you!
i have 3 pics and after choosing a radio button the pic should change. they are on top of eachother so the one thats picked gets on top and so on... so you keep picking which one goes on top.
here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-IS"
xml:lang="en-US">
<head>
<title>Assignment 6 part 1</title>
<script type = " text/javascript">
<!--
var dom = "saw";
function toTop (newTop)
{
domTop = document.getElementById(top).style;
domNew = document.getElementById(newtop).style;
domTop.zIndex = "0";
domNew.zIndex = "10";
top = newTop;
}
//-->
</script>
<style type = "text/css">
.tool1 {position:absolute; top:30%; left:40%; z-index:0;}
.tool2 {position:absolute; top:30%; left:40%; z-index:0;}
.tool3 {position:absolute; top:30%; left:40%; z-index:0;}
</style>
</head>
<body>
<p><img class = "tool1" id = "saw" src="/tools/saw.jpg" alt="saw"
height="248" width="364" /></p>
<p><img class = "tool2" id = "pliers" src="/tools/pliers.jpg"
alt="pliers" height="248" width="364"/></p>
<p><img class = "tool3" id = "trimmer" src="/tools/tree_trimmer.jpg"
alt="trimmer" height="248" width="364" /></p>
<form id = "myForm" action ="">
<p>
<input type = "radio" name = "newTop" value ="1" onclick =
"toTop('tool1')"/> saw
<br />
<input type = "radio" name = "newTop" value ="2" onclick =
"toTop('tool2')"/> pliers
<br />
<input type = "radio" name = "newTop" value ="3" onclick =
"toTop('tool3')"/> trimmer
<br />
</p>
</form>
</body>
</html>
Thank you!