Click to See Complete Forum and Search --> : css / java script help


newtda
12-22-2003, 01:31 AM
What I want to accomplish is when you click on the female text at the very top, I want either female 1 or 2 to dispair. Then when you click on the Male At the very top female 1 or 2 appears again. I have tried many things to try to get this to work, but no luck.

Here is my codeing:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
<function a() {
document.getElementById('Dan').style.visibility = 'visible';
}
function b() {
document.getElementById('Dan').style.visibility = 'hidden';
}
</script>



<style>
.mf{
font-family:sans comic;
font-weight:bold;
font-size:20pt;}


.1{
position: absolute;
top: 181px;
right: 10px;
leftt: 200px;
width: 30px;
height: 20px;
left: 18px;
}
.2{
position: absolute;
top: 234px;
right: 5px;
left: 121px;
width:30px;
height:20px;
}
.3{
position: absolute;
top: 182px;
right: 10px;
left: 624px;
width:112px;
height:20px;}
.4{
position: absolute;
top: 228px;
right: 10px;
left: 578px;
width:128px;
height:20px;}
</style>
</head>

<body>
<table width="614" border="0">
<tr>
<td><div align="center">Female</div></td>
<td><div align="center">Male</div></td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table class="mf" width="100%" height="100" border="0">

<tr>
<td width="33%"><span class="1">man1</span></td>
<td width="30%"><span class="2">man2</span></td>
<td width="37%"><span class="3">Female 1</span></td>
<td width="30%"><span class="4">Female 2</span></td>
</td>

</tr>
</table>
<span onClick="a()" onMouseOut="b()"></span>

<div id="Dan" style= visibility:hidden; onMouseover="a()" onMouseOut="b()">
</body>
</html>

giggledesign
12-22-2003, 03:53 PM
your url?

newtda
12-22-2003, 04:06 PM
I dont have url, sorry

TomDenver
12-22-2003, 04:36 PM
I've simplified the code to make it less confusing. I tested this and it works the way you explained in your first post:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function a(ID) {
document.getElementById(ID).style.visibility = 'visible';
}
function b(ID) {
document.getElementById(ID).style.visibility = 'hidden';
}
</script>

</head>
<body>
<span onClick="a('Female');">Male</span>
<span onClick="b('Female');">Female</span>
<br><br><br><br>
<span>man1</span>
<span id="Female">Female 1</span>
</body>
</html>

newtda
12-22-2003, 04:49 PM
sweet that is what I was Looking for, thank you so much