We could change the code,..we'll use the display property of CSS instead of innerHTML. See this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
padding:0;
height:100%;
}
#change
{
margin:10px auto auto 0;border:1px solid #000; background:#efefff; width:200px;
text-align:center;
height:100px;
}
#male,#female{
margin:1px auto;
background:#efefff;
width:200px;
padding:5px;
height:100px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
document.getElementById("male").style.display = 'none';
document.getElementById("female").style.display = 'none';
}
function male()
{
document.getElementById("male").style.display = '';
document.getElementById("female").style.display = 'none';
}
function female()
{
document.getElementById("female").style.display = '';
document.getElementById("male").style.display = 'none';
}
</script>
</head>
<body>
<a href="#"><img src="male.jpg" onClick="male(); return false" border="0"></a>
<a href="#"><img src="female.jpg" onClick="female(); return false" border="0"></a>
<div id="male">
This is the male form
<form name="form1" method="POST"><input type="text"><br/><input type="submit" value="Male"><br/>
</div>
<div id="female">
This is the female form<form name="form1" method="POST"><input type="text"><input type="submit" value="Female"><br/>
</div>
</body>
</html>
See if it helps :D