Hello there, I am new. Today, I created a gallery. I did the following thing to accomplish this.

1) Created a gallery with some small thumbnails of the original large image.
2) When the small thumnail is clicked, the larger version of the image fades into view and the previous (if exists) fades Out.

I programmed it and now it's working nicely. But I want another thing, and that is, when the user hovers the large version- a caption appears just beneath it. Watch my whole code.
Code:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="gallery, images, test page, practise">
		<title>Ahmed Sadman's Gallery Page</title>
		<link rel="stylesheet" href="styles/style1.css">
		<style>
			#contactme p.i_im_closed {
				background: #4e6c77 url('images/open.png') no-repeat 4px 8.5px;
				padding-left: 25px;
			}
			#contactme p.i_im_open {
				background: #4e6c77 url('images/close.png') no-repeat 4px 8.5px;
				padding-left: 25px;
			}
		</style>
		<script src="jquery-1.6.3.min.js"></script> 
		<script> // Programming goes here
			$(document).ready(function() {
				var browserCall = navigator.userAgent; // Determine and give warning to Internet Explorer
				if (browserCall.indexOf('MSIE') != -1) {
					$('body').attr('style',	'');
					$('body').html('<h1 style=\"font-size: 50px; font-family: serif\">Sorry, Internet Explorer is not supported for this page.</h1><p style=\"font-family: sans-serif; font-weight: bold\">For more info, please contact <a href=\"mailto: muhib96@gmx.com\">Ahmed Sadman</a></p>');
				}
				$('#gallery p').hide(); // Currently hiding all the captions
				var preloadImages = ['images/large/Chrysanthemum.jpg', 'images/large/Desert.jpg', 'images/large/Hydrangeas.jpg', 'images/large/Jellyfish.jpg', 'images/large/Koala.jpg', 'images/large/Lighthouse.jpg', 'images/large/Penguins.jpg', 'images/large/Tulips.jpg'];
				var imgs = [];
				for (var i = 0; i < preloadImages.length; i++) {
					imgs[i] = new Image();
					imgs[i].src = preloadImages[i];
				} // end of preloading images
				$('#gallery a').click(function(evt) { // This handles the gallery's dynamic activies
					evt.preventDefault();
					var imgPath = $(this).attr('href');
					var oldImg = $('#main_photo img');
					var newImage = $('<img src=" ' + imgPath + ' "> ');
					newImage.hide();
					$('#main_photo').prepend(newImage);
					newImage.fadeIn(800);
					oldImg.fadeOut(800, function() {
						$(this).remove();
					}); // end of callback function
				}); //end click
				$('#gallery a:first').click();
			
				$('#contactme form').hide(); // Function for the top right form
				$('#contactme p').hover(function() {
					$(this).css('backgroundColor', 'gray');
				},
				function() {
					$(this).css('backgroundColor', '#4e6c77');
				});
				$('#contactme p').toggle(function() {
					$('#contactme form').slideDown(350);
					$(this).css('borderRadius', '0');
					$(this).removeClass();
					$(this).addClass('i_im_open');
				},
				function() {
					$('#contactme form').slideUp(350, function() {
						$('#contactme p').css('borderRadius', '0 0 7px 7px');
						$('#contactme p').removeClass().addClass('i_im_closed');
					});
				});
			}); // end ready
		</script>
	</head>
	<body style="background: url('images/bg.png') repeat-x top; background-color: #ecf4f7;"> <!-- Inline style added. Because the same thing doesn't work in external css -->
		<div id="contactme">
			<p class="i_im_closed">Contact Me</p>
			<form method="post" action="">
				<label for="name">Name</label><br>
				<input type="text" name="name" id="name"><br>
				<label for="email">* Email</label><br>
				<input type="email" name="email" id="email" required><br>
				<label for="subject">Subject</label><br>
				<select>
					<option></option>
					<option>Feedback</option>
					<option>Support</option>
					<option>Others</option>
				</select><br>
				<label for="message" required>* Message</label><br>
				<textarea rows="6" cols="36" required></textarea>
				<div id="submit_button">
					<input type="submit" value="Send Me">
				</div>
			</form>
		</div>
		<div id="container">
			<div class="up_push">&nbsp;</div>
			<header>
				<hgroup>
					<h1>Ahmed Sadman's Photo Gallery</h1>
					<h2>An interactive and dynamic photo gallery</h2>
				</hgroup>
			</header>
			<div id="gallery">
				<a href="images/large/Chrysanthemum.jpg"><img src="images/small/Chrysanthemum.jpg"></a>
				<p>Image 1</p> <!-- The captions so on-->
				<a href="images/large/Desert.jpg"><img src="images/small/Desert.jpg"></a>
				<p>Image 2</p>
				<a href="images/large/Hydrangeas.jpg"><img src="images/small/Hydrangeas.jpg">
				<p>Image 3</p>
				<a href="images/large/Jellyfish.jpg"><img src="images/small/Jellyfish.jpg"></a>
				<p>Image 4</p>
				<a href="images/large/Koala.jpg"><img src="images/small/Koala.jpg"></a>
				<p>Image 5</p>
				<a href="images/large/Lighthouse.jpg"><img src="images/small/Lighthouse.jpg"></a>
				<p>Image 6</p>
				<a href="images/large/Penguins.jpg"><img src="images/small/Penguins.jpg"></a>
				<p>Image 7</p>
				<a href="images/large/Tulips.jpg"><img src="images/small/Tulips.jpg"></a>
				<p>Image 8</p>
			</div> <!-- End of gallery div -->
			<div id="main_photo"></div>
			<div style="float: left; border-bottom: 1.5px solid #436c77; width: 715px; position: relative; top: 430px;">&nbsp;</div> <!-- Used to draw the border just at the bottom of the photo. As the photo position is absolute, a border cannot be drawn directly using the #main_photo div. So this technique is used -->
			<div class="push"></div>
		</div> <!-- End of container div -->
		<footer>
			<p>Photos from Microsoft Win 7. Page created by Ahmed Sadman&copy; and all rights reserved</p>
		</footer>
	</body>
</html>
There is a p tag after each image link- When a larger version is hovered, I want to show the p tag just next to it (the p tag is the caption), and when the mouse goes away, the caption disappears.

I tried a lots of thing but there was always a problem, infact, I am totally new in JQuery/Javascript. Please help me.