読者です 読者をやめる 読者になる 読者になる

mouseoverで画像の切り替え

プラグインなしで書いてみました!!
手順としては
CSSで大きい画像の1枚目以外を非表示にする。
②大きい画像を非表示にする。(js)
③サムネイル画像をmouseoverした時にclass名を取得する。(js)
④#とクラス名を連結し変数idに代入する。(js)
⑤idとおなじliをフェードインする。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サムネイル画像をクリックでイメージ切り替え</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	
var thum01 = $('ul.thumnail01 li');
var thum02 = $('ul.thumnail02 li');
var thum03 = $('ul.thumnail03 li');

	thum01.mouseover(function(){
	 $('ul.styling_area01 li').hide();
	 var panel = $(this).attr('class');
	 var id = $('ul.styling_area01 #' + panel);
	 id.fadeIn();
	 });


	thum02.mouseover(function(){
	 $('ul.styling_area02 li').hide();
	 var panel = $(this).attr('class');
	 var id = $('ul.styling_area02 #' + panel);
	 id.fadeIn();
	 });


	thum03.mouseover(function(){
	 $('ul.styling_area03 li').hide();
	 var panel = $(this).attr('class');
	 var id = $('ul.styling_area03 #' + panel);
	 id.fadeIn();
	 });
	
});
</script>
</head>
<body>
<div class="container">

<ul class="styling_area styling_area01">

<li id="panel01"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling01.jpg" alt="#"></a></li>
<li id="panel02"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling02.jpg" alt="#"></a></li>
<li id="panel03"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling03.jpg" alt="#"></a></li>
<li id="panel04"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling04.jpg" alt="#"></a></li>

</ul><!-- .styling_area -->


<ul class="thumnail thumnail01">
<li class="panel01"><img src="img/styling01.jpg" alt="#"></li>
<li class="panel02"><img src="img/styling02.jpg" alt="#"></li>
<li class="panel03"><img src="img/styling03.jpg" alt="#"></li>
<li class="panel04"><img src="img/styling04.jpg" alt="#"></li>
</ul><!-- .thumnail -->

</div><!--#container-->




<div class="container">

<ul class="styling_area styling_area02">

<li id="panel01"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling01.jpg" alt="#"></a></li>
<li id="panel02"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling02.jpg" alt="#"></a></li>
<li id="panel03"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling03.jpg" alt="#"></a></li>
<li id="panel04"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling04.jpg" alt="#"></a></li>

</ul><!-- .styling_area -->


<ul class="thumnail thumnail02">
<li class="panel01"><img src="img/styling01.jpg" alt="#"></li>
<li class="panel02"><img src="img/styling02.jpg" alt="#"></li>
<li class="panel03"><img src="img/styling03.jpg" alt="#"></li>
<li class="panel04"><img src="img/styling04.jpg" alt="#"></li>
</ul><!-- .thumnail -->

</div><!--#container-->



<div class="container">

<ul class="styling_area styling_area03">

<li id="panel01"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling01.jpg" alt="#"></a></li>
<li id="panel02"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling02.jpg" alt="#"></a></li>
<li id="panel03"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling03.jpg" alt="#"></a></li>
<li id="panel04"><a href="http://store.world.co.jp/p/H9079/item/H90792001251230.html"><img src="img/styling04.jpg" alt="#"></a></li>

</ul><!-- .styling_area -->


<ul class="thumnail thumnail03">
<li class="panel01"><img src="img/styling01.jpg" alt="#"></li>
<li class="panel02"><img src="img/styling02.jpg" alt="#"></li>
<li class="panel03"><img src="img/styling03.jpg" alt="#"></li>
<li class="panel04"><img src="img/styling04.jpg" alt="#"></li>
</ul><!-- .thumnail -->

</div><!--#container-->
</body>
</html>
/*reset*/
*{margin:0;padding:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
img{vertical-align:bottom;}
img{width:100%;}

.container{width:1000px;
height:1000px;
margin:30px auto;
position:relative;}

ul.styling_area li{width:640px; position:absolute;}
ul.styling_area li{display:none;}
ul.styling_area li:first-child{display:block;}



ul.thumnail{position:absolute; right:100px;}
ul.thumnail li{width:150px; margin:10px; }