mouseover例文

<ul class="photo">
	<li><img src="images/shop/photo1.jpg"></li>
	<li><img src="images/shop/photo2.jpg"></li>
	<li><img src="images/shop/photo3.jpg"></li>
</ul>

$('.photo img').hover(function() {
	$(this).stop().fadeTo(330,0.7);
		}, function() {
	$(this).stop().fadeTo(330,1);
});
$('.photo li').mouseover(function(){
	$(this).closest('ul').css('backgroundImage','url(' + $(this).children('img').attr('src') + ')')
});

ulの背景画像として予めphoto1の画像をいれておき、それぞれのリストの画像はCSSで縮小しておきます。
マウスオーバーでリストの画像がulの背景画像と入れ替わります。
間違え易いのが、jQueryにてCSSを指定する際の記述方法。
background-imageがbackgroundImageとなるように、ハイフンの直後の文字列が大文字になり、ハイフン自体は消えます。
ラクダ記法とかキャメルケースとか。
.closestは直前の親要素、.childrenは子要素、attr(‘src’)は画像のソースURLです。
attr(‘src’)の時にはsrcの部分、画像のソースURLを抽出し、
attr(‘src’,’photo.jpg’)の時には画像のソースURLをphoto.jpgに書き換えます。

$(function(){
	$('#gallery .topImage').prepend($('#gallery li:first-child img').clone());
	$('#gallery .textarea').html($('#gallery li:first-child img').attr('alt'));
	$('#gallery li img').mouseover(function(){
		$('#gallery .topImage img').attr('src',$(this).attr('src'));
		$('#gallery .textarea').html($(this).attr('alt'));
	}).hover(
		function(){
			$(this).stop().fadeTo(250,0.7);
		},
		function(){
			$(this).stop().fadeTo(250,1);
		}
	).css('cursor','pointer');
});

<div id="gallery">
	<p class="topImage"></p>
	<ul>
		<li><img src="images/construction/case1.jpg" alt="Sample1"></li>
		<li><img src="images/construction/case2.jpg" alt="Sample2"></li>
		<li><img src="images/construction/case3.jpg" alt="Sample3"></li>
		<li><img src="images/construction/case4.jpg" alt="Sample4"></li>
		<li><img src="images/construction/case5.jpg" alt="Sample5"></li>
		<li><img src="images/construction/case6.jpg" alt="Sample6"></li>
		<li><img src="images/construction/case7.jpg" alt="Sample7"></li>
		<li><img src="images/construction/case8.jpg" alt="Sample8"></li>
		<li><img src="images/construction/case9.jpg" alt="Sample9"></li>
		<li><img src="images/construction/case10.jpg" alt="Sample10"></li>
		<li><img src="images/construction/case11.jpg" alt="Sample11"></li>
		<li><img src="images/construction/case12.jpg" alt="Sample12"></li>
	</ul>
	<div class="textArea"></div>
</div>

マウスオーバーした画像をtopImage内に拡大表示し、textArea内をaltの内容に置き換えます
初期表示の画像やテキストは1枚目の画像を参照します

<ul id="gNav" class="clearfix">
	<li id="gNavLi1"><a href="#">Link1</a></li>
	<li id="gNavLi2"><a href="#">Link2</a></li>
	<li id="gNavLi3"><a href="#">Link3</a></li>
	<li id="gNavLi4"><a href="#">Link4</a></li>
	<li id="gNavLi5"><a href="#">Link5</a></li>
	<li id="gNavLi6"><a href="#">Link6</a></li>
	<li id="gNavLi7"><a href="#">Link7</a></li>
	<li id="gNavLi8"><a href="#">Link8</a></li>
</ul>

$(function(){
	$('#gNav li').append('<div class="tab"></div>');
	$('#gNav a').css('cursor','pointer').blend().mouseover(function() {
    $(this).siblings('div.tab').stop().animate({top : '5px'},'fast','linear').animate({top : '0px'},'normal','easeOutBounce');
	});
});

cssでliをrelativeにし、jsにて自動挿入されるdiv.tab及びaタグを絶対配置にします
2つをtop:5pxに配置し、z-indexにてaをdiv.tabの上に乗せます
hoverでaにblendの効果が出て、マウスオーバーでdiv.tabがぴょこっと飛び出ます
ボタンの色とタブの色をそれぞれ合わせておくと可愛らしいナビゲーションになります　_(┐「ε:)_