[LearningCoder]

Hi,

I have been browsing a load of tutorials and found one which I can understand and which is easy to implement. When I hover over an image, I want it to display a larger image next to it as a sort of 'preview' feature of the image.

I have added some of my own code (the opacity bits) and edited the other jquery to suit my needs. The problem I am having is as well as displaying the corresponding image, I also want it to display a bit of text underneath the image. I am successfully appending the paragraph to the body but when I try to manipulate the Y offset, it doesn't seem to work.

Here is the code:

$(function(){
	var offsetY = 15;
	var offsetX = 15;
	var offsetTextY = 300;
	
	$('#product_holder a img').hover(function(e){
		$(this).stop().animate({'opacity' : 0.5});
		var image = $(this).attr('src');
		
		$('<img id="largeImage" src="' + image + '" alt="image" />')
			.css('top', e.pageY + offsetY)
			.css('left', e.pageX + offsetX)
			.appendTo('body');
			
		$('<p id="product_text">hello, this is information about the product</p>')
			.css('top', e.pageY + (offsetY + offsetTextY))
			.css('left', e.pageX + offsetX)
			.appendTo('body');
	
	}, function(){
		$(this).stop().animate({'opacity' : 1});
		$('#largeImage').remove();
		$('#product_text').remove();
	});
	
	$('#product_holder a img').mousemove(function(e){
		$('#largeImage')
			.css('top', e.pageY + offsetY)
			.css('left', e.pageX + offsetX)
		$('#product_text')
			.css('top', e.pageY + offsetY)
			.css('left', e.pageX + offsetX)
	});
	
});

I have highlighted the line which doesn't seem to be working. As you can see I have created another variable with a value of 300 (this is the total height I set my 'preview' images to. I have to also accommodate for a bit of padding, but that can be done later). Trouble is when I try to add offsetY to offsetTextY, it doesn't seem to add them correctly. The paragraph offsets to the same area which the image does but the 300 pixels are not being accounted for thus covering the top half of the image. I have tried all kinds of different ways to make sure the the calculation of offsetY and offsetTextY is done first, but it doesn't seem to be working anyway.

Thanks for any help you can give me.

Regards,

LC.