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
    Join Date
    Aug 2002
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Jquery - Fade in text, over image fade out

    Hello,

    Firstly, i am a complete newbie when it comes to Jquery!

    Please look at: http://www.greekconcierge.com/event-services.php

    I have built a hidden div as you can see in the source code which contains some text. I have done these for the first two images

    I would like when a user hovers over each image, the image to fade out with the text div for that image to fade in.

    Then when the user moves the mouse out, the text div should fade out and the image should fade in.

    Could someone please recommend a solution to this?

    many thanks,
    Andy

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    See if this gives you a little help:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>neodjandre</title>
    
    <style type="text/css">
    .picsText {
    	display: none; 
    	width: 180px; 
    	height: 121px;
    	position: absolute;
    	top: 0;
    }
    .mediumtx {
        color: #222;
        font-family: verdana,arial,sans-serif;
        font-size: 0.87em;
    }
    div#pics {
    	position: absolute;
    	top: 200px;
    }
    </style>
    
    </head>
    <body>
    
    <!-- TEXT FOR VENUE -->
    <div id="venue" class="picsText">
    <p class="mediumtx" align="left">
    Researching for the ideal venue for your event can be one of the most 
    daunting tasks you will be faced with. Greek Concierge has the right 
    contacts to make this happen.
    </p>
    </div>
    
    <!-- TEXT FOR THEME -->
    
    <div id="theme" class="picsText">
    <p class="mediumtx" align="left">
    Getting the theme right is important to attract more guests at your 
    events. We have many ideas to choose from - all you need is to decide 
    which one is right for the moment you are trying to create. 
    </p>
    </div>
    
    <div id="pics">
    	<img src="http://www.greekconcierge.com/images/events-venue.png"  title="" alt="Events London Venue" rel="venue" >  
    	<img src="http://www.greekconcierge.com/images/events-theme.png"  title="" alt="Events London Theme" rel="theme"> 
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('#pics img').each(function(){
    		$(this).hover(function(){
    			$(this).css({opacity: 0});
    			$('#'+$(this).attr('rel')).fadeIn(400);
    			return false;
    		}, function(){
    			$(this).css({opacity: 1});
    			$('#'+$(this).attr('rel')).fadeOut(400);
    		});
    	});	 
    }); 
    </script>
    
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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