• 締切済み

二重の画像切り替え

以下のような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

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • 画像のフェードインについて・・・。

    現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードインについて・・・。

    以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • jquery1.4で画像とリンクの切り替えを行おうとしています。

    jquery1.4で画像とリンクの切り替えを行おうとしています。 ひとまず動き的にはうまくは行っているのですが、切り替え対象の複数の画像をfloat:left;等で 横並びにすると、切り替えるたい画像をクリック後に規定の場所に画面が移動してしまいます。 対処法があれば教えていただけますでしょうか？ 【javascript】 $(document).ready( function() { $(".thumbnail p").click( function() { var changeSrc = this.src; var changeHref = this.href; $("#target img").fadeOut("fast", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); $("#target a").attr("href", changeHref); }); $(".thumbnail2 img").click( function() { var changeSrc = this.src; $("#target2").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); }); $(".thumbnail3 img").click( function() { var changeSrc = this.src; $("#target3").slideUp( "slow", function() { $(this).attr("src", changeSrc); $(this).slideDown(); } ); }); }); </script> 【HTML】 <div> <p id="target"><a href="./main.cgi?mode=details2&sid=1&gid=1S000046"><img src="./g_images/IMG_1457.jpg" width="240" height="320" alt="ブランドカテゴリー" /></a></p> </div> <div class="thumbnail"> <p href="./main.cgi?mode=details2&sid=1&gid=1S000043" src="./g_images/IMG_1457.jpg" class="item"> <img src="./g_images/IMG_1457.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000043">詳細</a></p> <p href="./main.cgi?mode=details2&sid=1&gid=1S000047" src="./g_images/IMG_1469.jpg" class="item"> <img src="./g_images/IMG_1469.jpg" width="90" height="150" alt="ブランドカテゴリー" /> <br /><a href="./main.cgi?mode=details2&sid=1&gid=1S000047">詳細</a></p> </div> 【css】 .thumbnail { height:200px; text-align:center; } .item { float:left; padding-left:10px; margin-left:10px; }

  • 画像のフェードイン・フェードアウト

    現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • IE6、7で途切れてしまう画像

    分からない部分が出た際にいつもお世話になっております。 今回もどなたかご回答頂けますと幸いです。 グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？） 高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト"　width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • 画像の切り替え

    教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。

  • サムネイル画像のclass切替がうまく動かない。

    すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして　class="current"　を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。

  • 順番にクラスをつけていく方法

    順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード０にしてactiveクラスがついたときに フェードを１００にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する