jQueryを使った画像切り替え

本当に今更だけどjQueryなどのライブラリって便利だなー。
ちょっとしたときに使う、画像切り替え（入れ替え）。

※jQueryは、Google AJAX Libraries APIから。

画像切り替え

デモ

Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
	//ナビゲーションのmouseover。画像切り替えとは関係ない。
	$("ul > li").hover(function(){ 
		$(this).fadeTo(200,0.5); 
	},function() {
		$(this).fadeTo(200,1); 
	});
	
	//画像切り替え、#targetの内容を変更する。
	$("ul > li > a").click(function(){
		var src = $(this).attr("href");
		$("#target").fadeOut("slow",function() {
			$(this).attr("src",src);
			$(this).fadeIn();
		});
		return false;
	});
});
</script>

HTML

<!-- href=""で切り替えたい画像を指定 -->
<ul>
<li><a href="1_on.jpg"><img src="1.jpg" /></a></li>
<li><a href="2_on.jpg"><img src="2.jpg" /></a></li>
</ul>

<!-- 最初に表示しておく画像、id="target"をふっておく -->
<img src="1_on.jpg" id="target" />

画像切り替え（キャプション有り）

デモ

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
						   
	$("ul > li").hover(function(){ 
		$(this).fadeTo(200,0.5);
	},function() {
		$(this).fadeTo(200,1);
	});
	
	$("ul > li > a").click(function(){
		var src = $(this).attr("href"); 
		var title = $(this).attr("title");
		$("#slide").fadeOut("slow",function() {
			$(this).find("img").attr("src",src);
			$(this).find("em").html(title);
			$(this).fadeIn();
		});
		return false;
	});
	
});
</script>

HTML

<!-- href=""で切り替えたい画像を指定 / title=""にキャプションを指定 -->
<ul>
<li><a href="1_on.jpg" title="title1"><img src="1.jpg" /></a></li>
<li><a href="2_on.jpg" title="title2"><img src="2.jpg" /></a></li>
</ul>

<!-- 画像とキャプション表示域をブロック要素でかこっておいてid="slide"等とふっておく / キャプションは<em>などで囲っておく -->
<div id="slide">
<img src="1_on.jpg" />
<em>title1</em>
</div>

・・・↓こちらの方のほうが詳しい！！
クリックで画像を入れ替えつつキャプションも入れ替える | チバのブログ