mouseoverで画像の切り替え
プラグインなしで書いてみました!!
手順としては
①CSSで大きい画像の１枚目以外を非表示にする。
②大きい画像を非表示にする。（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; }
