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="サンプル1"></li><!--
		--><li><img src="images/construction/case2.jpg" alt="サンプル2"></li><!--
		--><li><img src="images/construction/case3.jpg" alt="サンプル3"></li><!--
		--><li><img src="images/construction/case4.jpg" alt="サンプル4"></li><!--
		--><li><img src="images/construction/case5.jpg" alt="サンプル5"></li><!--
		--><li><img src="images/construction/case6.jpg" alt="サンプル6"></li><!--
		--><li><img src="images/construction/case7.jpg" alt="サンプル7"></li><!--
		--><li><img src="images/construction/case8.jpg" alt="サンプル8"></li><!--
		--><li><img src="images/construction/case9.jpg" alt="サンプル9"></li><!--
		--><li><img src="images/construction/case10.jpg" alt="サンプル10"></li><!--
		--><li><img src="images/construction/case11.jpg" alt="サンプル11"></li><!--
		--><li><img src="images/construction/case12.jpg" alt="サンプル12"></li><!--
	--></ul>
	<div class="textArea"></div>
</div>

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

<ul id="gNav" class="clearfix"><!--
  --><li id="gNavLi1"><a href="#">リンク1</a></li><!--
  --><li id="gNavLi2"><a href="#">リンク2</a></li><!--
  --><li id="gNavLi3"><a href="#">リンク3</a></li><!--
  --><li id="gNavLi4"><a href="#">リンク4</a></li><!--
  --><li id="gNavLi5"><a href="#">リンク5</a></li><!--
  --><li id="gNavLi6"><a href="#">リンク6</a></li><!--
  --><li id="gNavLi7"><a href="#">リンク7</a></li><!--
  --><li id="gNavLi8"><a href="#">リンク8</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がぴょこっと飛び出ます
ボタンの色とタブの色をそれぞれ合わせておくと可愛らしいナビゲーションになります _(┐「ε:)_

コメントを残す