• 締切済み

二重の画像切り替え

以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> 　　<ul> 　　　　<li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> 　・ 　・ 　・

みんなの回答

回答No.1

面白そうだったので作ってみました。 なお、他人の書いたソースを元に作るのは難しかったので、画像の切り替えの部分のみを1から書いています。何かライブラリを使っておられるようですが、そのあたりの処理はご自分で行ってください。 また、エラー処理などもしていませんがご了承ください。 <body onload="init()"> <img id="imgmain"> <br> <img id="img00" onClick="changeview(0)"> <img id="img01" onClick="changeview(1)"> <img id="img02" onClick="changeview(2)"> <br> <img id="img10" onClick="changecolor(0)"> <img id="img11" onClick="changecolor(1)"> <img id="img12" onClick="changecolor(2)"> <br> <script> imgsrcmain=new Array(); imgsrcmain[0]=new Array("img00.jpg","img01.jpg","img02.jpg"); imgsrcmain[1]=new Array("img10.jpg","img11.jpg","img12.jpg"); imgsrcmain[2]=new Array("img20.jpg","img21.jpg","img22.jpg"); imgsrc0=new Array(); imgsrc0[0]=new Array("thumb00.jpg","thumb01.jpg","thumb02.jpg"); imgsrc0[1]=new Array("thumb10.jpg","thumb11.jpg","thumb12.jpg"); imgsrc0[2]=new Array("thumb20.jpg","thumb21.jpg","thumb22.jpg"); imgsrc1=new Array("color0.jpg","color1.jpg","color2.jpg"); color=0; view=0; function changeview(n){ view=n; show(); } function changecolor(n){ color=n; show(); } function show(){ document.getElementById("imgmain").src=imgsrcmain[color][view]; for(i=0;i<imgsrc0[0].length;i++){ document.getElementById("img0"+i).src=imgsrc0[color][i]; } } function init(){ show(); for(i=0;i<imgsrc1.length;i++){ document.getElementById("img1"+i).src=imgsrc1[i]; } } </script> <body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する