jQuery functions not working on browser refresh

[LearningCoder]

Hi, I have an image as the site logo. to create a hover effect, I have created an image map for the menu words. I have also created separate images of the words of the menu but changed the color and put them 'on-top' of my main logo. My function first sets the separate images to have 0 opacity. Then when hovered, I set opacity to 1 and obviously on mouseleave back to 0. Problem is when I refresh my browser, the funtion is not working because the separate iamges are shown and nothing happens.

Here is my function:

jQuery:

<script type="text/javascript">
     $(function() {
	     $('a img:nth-child(1)').animate({'opacity' : 0});
		 
	     $('a img').hover(function() {
		     $(this).stop().animate({'opacity' : 1});
		 }, function(){
		     $(this).stop().animate({'opacity' : 0});
		 });
	 });
</script>

CSS:

#container {width: 800px;
           border: 1px solid black;
			height: 300px;
			margin: auto;}

#logo {position: absolute;}

#hidden1 {position: absolute;
          top: 79px;
		  left: 198px;}

#hidden2 {position: absolute;
          top: 79px;
		  left: 285px;
		  padding-right: 0px;}

#hidden3 {position: absolute;
          top: 80px;
		  left: 369px;
		  padding-right: 0px;}
		  
#hidden4 {position: absolute;
          top: 80px;
		  left: 500px;
		  padding-right: 0px;}
		  
#hidden5 {position: absolute;
          top: 80px;
		  left: 664px;
		  padding-right: 0px;}
		  
#hidden6 {position: absolute;
          top: 80px;
		  left: 736px;
		  padding-right: 0px;}

HTML:

<div id="container">

     <img src="images/logo.png" alt="logo" id="logo" title="logo" width="800px" height="170px" usemap="#logomenu" border="0" />
	 
	 <map name="logomenu">
	 <area shape="rect" coords="88,76,172,104" id="home" alt="home" href="index.htm" />
	 <area shape="rect" coords="173,76,253,104" id="news" alt="news" href="news.htm" />
	 <area shape="rect" coords="254,76,388,104" id="members" alt="news" href="members.htm" />
	 <area shape="rect" coords="389,76,476,104" id="forums" alt="news" href="forums.htm" />
	 <area shape="rect" coords="555,76,620,104" id="help" alt="news" href="help.htm" />
	 <area shape="rect" coords="621,76,679,104" id="links" alt="news" href="links.htm" />
	 </map>
	 
	 
	 <a href="index.htm">
	 <img src="images/home.png" alt="homeimage" id="hidden1" title="homeimage" width="86px" height="23px" border="0" /></a>
	 <a href="news.htm">
	 <img src="images/news.png" alt="newsimage" id="hidden2" title="newsimage" width="82px" height="24px" border="0" /></a>
	 <a href="members.htm">
	 <img src="images/members.png" alt="membersimage" id="hidden3" title="membersimage" width="130px" height="23px" border="0" /></a>
	 <a href="forums.htm">
	 <img src="images/forums.png" alt="forumsimage" id="hidden4" title="forumsimage" width="90px" height="22px" border="0" /></a>
	 <a href="help.htm">
	 <img src="images/help.png" alt="helpimage" id="hidden5" title="helpimage" width="68px" height="22px" border="0" /></a>
	 <a href="links.htm">
	 <img src="images/links.png" alt="linksimage" id="hidden6" title="linksimage" width="54px" height="22px" border="0" /></a>

</div>

Thank you for any information you may have!

[LearningCoder]

God i've just figured out it was the 'a img:nth-child(1)' part :/ Very sorry.