Jquery enlarging image

JavaScript
1

I’m trying to figure out this how to make images enlarge on hover.

I’ve been trying a variety of techniques, but I can’t figure out how to destroy the hover state on mouse out.

It seems that a created element does not respond to mouse events. Is this correct?

I set the html in a table because they are in a cms and div blocks get messed up in the editor.

http://uusb.webventions.com/UsingourBuilding

Here’s the Javascript I have right now:

$('.imgPopup td img').hover(

	function(){
	
	parent=$(this).parent();
	htm=parent.html();
	newHTML="<div style='position:relative'>"+htm+"<\\/div>";
	parent.html(newHTML);
	
	newParent=parent.find('div');
	
	$(this).clone().appendTo(newParent).attr('class','popupIMG');
	$('.popupIMG').removeAttr('width');
	$('.popupIMG').removeAttr('height');
	$('.popupIMG').fadeIn('fast');
	},
	function (){
		$('.popupIMG').fadeOut('fast');
	}
	
);

Any thoughts…

Thanks E

2

Fantastic thanks!

3

Watch this video tutorial, you will your problem solved in no time.

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-11/