Hover over a thumbnail and open up a dead centered larger version

// For a link like <a href="one.jpg"><img src="oneThumbNail.jpg" /></a>
	$('a').hover(function(e) {
 
		// Mouse on
 
                // Get the linked large image from thumbnail anchor's href
		var href = $(this).attr('href'); 
 
                // Get the alternative text of the thumbnailed image
		var altText = $(this).children().attr('alt'); 
 
		// Create a containing div#horizon and inside of it create an image from the large version of the thumbnail
		// Hide the image to begin with, and append it to the body element
		$('<img id="largeImage" src="' + href + '" alt="large version of '+ altText +'" />')	
		.hide()
		.appendTo('body');
 
 
		// Get the width and height of the new image, and calculate the margin-top: and margin-left: values necessary to deadCentre the image
		var imgWidth = $('img#largeImage').attr('width');
		var imgHeight = $('img#largeImage').attr('height');
		var topVal = -(imgHeight/2);
		var leftVal = -(imgWidth/2);
 
		// Apply the necessary css to deadCentre the image
		$('img#largeImage').css({'margin-top': topVal, 'margin-left': leftVal});
 
		// Make the image visible
		$('img#largeImage').show()
 
	}, function() {
 
		// Mouse off 
 
		// Remove the image from the DOM
		$('img#largeImage').remove();
	});
 
	// Render the anchor unclickable
	$('a').click(function() {
		return false;
	});