マウスを画像で拡大

	<style type="text/css">
	.enlarge_div{
		width:640px; margin:100px auto;
	}
	.enlarge_ul{
		list-style-type:none;
		float:left;
	}
	.enlarge_ul li a{
		display:block; 
		position:relative;
		height:150px; 
	}
	.enlarge_ul li img{
		position:absolute;
		left:0;
		top:0; 
		height:140px; 
		width:140px; 
		border:solid 2px #DDDDDD
	}
	.enlarge_ul li img.on{
		border:solid 4px #DDDDDD
	}
	</style>
	

	<script type="text/javascript">
	$(document).ready(function(){
		$(".enlarge_ul > li > a").each(function(){
			$(this).find('img').hover(
			function(){
				$(this).animate({
				width:"280px",
				height:"280px",
				top:"-70px",
				left:"-70px"
				}, 200).addClass('on');
			},
			function(){
				$(this).animate({
				width:"140px",
				height:"140px",
				top:"0",
				left:"0"
				}, 200).removeClass('on');				
			}
			);
			$(this).hover(
			function(){
				$(this).css("z-index", 1);
			},
			function(){
				$(this).css("z-index", 0);
			});
		});
	});
	</script>

<div class="enlarge_div">
	<ul class="enlarge_ul">
		<li class="enlarge_li">
			<a href="#">
				<img src="/images/  1.jpg"/>
			</a>
		</li>
		<li class="enlarge_li">
			<a href="#">
				<img src="/images/  2.jpg"/>
			</a>
		</li>
		<li class="enlarge_li">
			<a href="#">
				<img src="/images/  3.jpg"/>
			</a>
		</li>
		<li class="enlarge_li">
			<a href="#">
				<img src="/images/  4.jpg"/> 
			</a>
		</li>
	</ul>
</div>