当方初心者です。
ご教授下さい。
宜しくお願いします。

横並びのサブ画像をクリックしたときサブ拡大画像を表示させたいのですが
JSバグなのかうまく起動しません。
問題点は以下に記載してあります。


※予め商品登録ページのサブ画像、サブ拡大画像をMAX8枚登録できるように拡張しています


■現状の実装

-------------------------------------------------



商品メイン画像[754×503]



-------------------------------------------------
|サブ画｜サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜サブ｜

商品メイン画像[754×503]の下に表示されている
商品のサブ画像[130×130]の(1)〜(8)をオンマウスした際
商品メイン画像[754×503]のサイズでサブ拡大画像[754×503]が動的にチェンジする。


■問題点

webブラウザで動作させたとき
うまく画像が切り替わりません。
一応全画面表示にすると数回ボタン押下で画像がチェンジするのですが
webを縮小して画像をクリックすると『スクロールバーが上に上がる』
挙動になってしまします。
これはJSのバグなのでしょうか？

IE、firefox、クローム等
webブラウザで見た時スクロールバーがあるものに関しては
すべて『スクロールバーが上に上がる』(画像が逃げるような)
挙動になってしまします。
全画面表示でクリックすると問題なく動いています。

ちなみにiphoneでは素早く
サブ画像サムネイル押下でサブ拡大画像が正常に切り替わります。

説明が分かりずらくてすいません。
jsの正規表現の問題なのでしょうか。


下記は現状のスクリプトになります。

<script type="text/javascript">
$(document).ready(function()
{
//change_thumb
$(function(){
$('.thumb_img a').click(function(){
var h = $(this).eq(0).attr('rel');
$('.main_img img').fadeOut(function(){
($('.main_img img').attr("src",h)).fadeIn();
});
return false;
})
});

});
</script>



どなたか分かる方ご教授下さい。

宜しくお願い致します。

同じく初心者ですが…

<script type="text/javascript">
function func_img_change(img) {
document.getElementById('show_img').src = img;
}
</script>

<!-- メイン画像 -->
<img src="{画像URL}" width="500" height="500" alt="{商品名}" id="show_img" class="picture" />
<!-- サブ画像 -->
<img src="{画像URL}" onMouseover="func_img_change('{画像URL}');" width="50" height="50" alt="{商品名}" class="picture"/>