Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts

    jQuery functions not working on browser refresh

    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:
    Code:
    <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:
    Code:
    #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:
    Code:
    <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!

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    912
    Thanks
    76
    Thanked 28 Times in 28 Posts
    God i've just figured out it was the 'a img:nth-child(1)' part :/ Very sorry.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •