Javascript menu problems

hey can any one tell me what is wrong with this code it is supposed to start with a white rectangle and then on mouseover display the menu. the animation is working but when the menu is displayed, you cant use any of the inputs or click any of the links. i am not really that good at javascript so i thought maybe someone here could help

here is the code:

<!DOCTYPE html>
<html>
<head>
  <script type='text/javascript' src='jquery.js'></script>
  
  <style type='text/css'>
 
div.fadehover {
	position: relative;
	}
 
img.a {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
        }
 
 
</style>

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "medium");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>
</head>
<body>

<div class="fadehover">
<img src="images/whitespace.gif" alt="" class="a" width='100%' height='60px' />
<table align='center' id='' width='100%'>
	<tr width='100%'>
		<td width='12.5%' align='center'>
			<a href='profile.php'>Profile</a>
		</td>
		<td width='12.5%' align='center'>
			<a href='browse.php'>Browse</a>
		</td>
		<td width='50%' align='center'>
			<table width='100%' align='center'>
				<tr align='center'><form method='GET' action='search.php'>
					<td>
					Search:				
					<input type='text' name='search'>
					<input type='submit' name='submit' value='Search'>
					</td>
					</form></tr>
			</table>
		</td>
		<td width='20%'><form action= login.php>
			<table width='100%'>
				<tr>
					<td>
					Username:
					</td>
					<td>
					<input type='text' name='username'>
					</td>
				</tr>
				<tr>
					<td>
					Password:
					</td>
					<td>
					<input type='password' name='password'>
					</td>
					<td>
					<input type='submit' name='submit' value='Login'>
					</td>
				</tr>
			</table>
		</form></td>
		<td width='5%'>
		<center><a href='register.php'>Register?</a></center>
		</td>
	</tr>
<table>
<span>
</div>


</body>
</html>

it’s my first post so i wasn’t exactly sure how to post the code hope it’s ok if not let me know.

thnks in advance

Take every last scrap of the scripting out and you still can’t click on things.

Will get back to you on this.

The image overlay is preventing you from clicking through to anything, so when the fade has completed, you need to move the overlay out of the way, which also means that you should not use hovering over the image, but instead hovering over the fadehover section.

When you move out of the fadehover area, you need to bring the faded overlay back, then reveal it.

Here, try this:


$(document).ready(function(){
    $('.fadehover').hover(function() {
        $('img.a').stop().animate({"opacity": "0"}, "medium", function () {
            $('img.a').css({left: '-9999px'});
        });    
    },
    function() {
        $('img.a').css({left: '0'});
        $('img.a').stop().animate({"opacity": "1"}, "slow");
    });
});

works perfectly thanks alot