jQueryを使ってサイトのグローバルメニュー下のFlashコンテンツを動的に切り替える方法
- jQueryを使用して、サイトのグローバルメニュー下のFlashコンテンツを動的に切り替える方法を紹介します。
- ボタンをクリックすると、リンク先のページに遷移しながら、左側のイメージが変更されます。
- フェードインなどの動的なエフェクトは不要で、静的なイメージの切り替えのみを行う方法です。
- ベストアンサー
jQuery を使って下記のようなことは可能でしょうか。また可能な場合
jQuery を使って下記のようなことは可能でしょうか。また可能な場合参考になるテンプレートのようなものがある場所を教えていただけますと幸いです。 http://www.nittsu.co.jp/index.html のサイトのグローバルメニュー下のFlashコンテンツ。 やりたいことは、 同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。 また、右側のボタンをクリックするとリンクされているページに飛ぶ形。 表示されるイメージは、フェードインなどのように動的に表示される必要はなく、単純に静的なイメージが切り替わる感じです。 よろしくお願いいたします。
- tomo0117
- お礼率50% (43/86)
- JavaScript
- 回答数3
- ありがとう数10
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
jQuery使ってなくて申し訳ないですが 大雑把にこんな感じですか？ 動的に作成したほうがいい気もしたのですが時間がないので適当ですいません。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> <script type="text/javascript"> function test(el) { document.images["ifr"].src = el + ".png"; } </script> </head> <body> <table border = "1"> <tr> <td rowspan = "5"> <img src = "1.png" id = "ifr" width = "400" height = "240"> </td> </tr> <tr> <td ><a href = "test1.html" ><img src = "1.png" id = "1" width = "100" height = "50" onmouseover = "test(1);"></td> </tr><tr> <td><a href = "test2.html" ><img src = "2.png" id = "2" width = "100" height = "50"onmouseover = "test(2);"></td> </tr><tr> <td><a href = "test3.html"><img src = "3.png"id = "3" width = "100" height = "50" onmouseover = "test(3);"></td> </tr><tr> <td><a href = "test4.html"><img src = "4.png"id = "4" width = "100" height = "50"onmouseover = "test(4);"></td> </tr> </table> </body> </html>
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
サンプルです。レイアウトは一切していないのでCSS等で。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ var anchorblock = '#nabi'; // リンクの収まっている要素のid var imageblock = '#image'; // imgの収まっている要素のid $(imageblock+' img').each(function(idx){ if(idx > 0) $(this).hide(); }); $(anchorblock+' a').each(function(idx){ jQuery.data($(this).get(0),'anchor_index',idx); }); $(anchorblock+' a').hover(function(){ var a_idx = jQuery.data($(this).get(0),'anchor_index') +1; $(imageblock+' img').each(function(idx){ if(idx == a_idx) { $(this).show(); } else { $(this).hide(); } }); },function(){ $(imageblock+' img').each(function(idx){ if(idx > 0) $(this).hide(); else $(this).show(); }); }); }); </script> </head> <body> <p id="nabi"> <a href="http://example.com/1/">リンク１</a> <a href="example2.html">リンク２</a> <a href="example3.html">リンク３</a> </p> <p id="image"> <img src="img/zzz.jpeg"><!-- 一つ目がマウスオーバー無しの画像 以下はリンクの順に対応 --><img src="img/aaa.jpeg"><!-- --><img src="img/bbb.jpeg"><!-- --><img src="img/ccc.jpeg"> </p>
お礼
ありがとうございます。 早速参考にさせていただきトライしてみます。 結果、ご連絡いたします。
- higee
- ベストアンサー率30% (4/13)
多分お望みのものに一番近いかと思います。 多少自分でカスタマイズする必要性があるかもしれませんが。 以下のURLにはサンプルがあります。 http://f32.aaa.livedoor.jp/~azusa/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB
お礼
ありがとうございます。 早速参考にさせていただきトライしてみます。 おそらく紹介いただいたサイトと同じことを考えておりましたので 可能かと思います。 結果、ご連絡いたします。
関連するQ&A
- 下記のようなメニューを作成しようと思い、質問したところJavaScri
下記のようなメニューを作成しようと思い、質問したところJavaScriptでの方法を教わり 作成したのですが、解決してから、右側の4つのボタンメニューに2pxぐらいの隙間が できてしまい、いろいろCSSで調整してみたのですが、どうしても解決できなく再度質問しました。 ※http://okwave.jp/qa/q5843544.htmlで質問と回答を得る http://www.nittsu.co.jp/index.html のサイトのグローバルメニュー下のFlashコンテンツ。 やりたかったことは、 同じように右側に4つのボタンを縦に配置して、マウスオーバーをすると左側のイメージが変更されるようにしたい。 教えてもらった方法は、http://www.red.oit-net.jp/tatsuya/java/image3.htm のサンプルデータと同様な方法で行いました。 また、さらに右側のボタンをマウスオーバーで同時に画像も変更できるとさらに良いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ページの横移動
左側にナビゲーション(200px)、右側にコンテンツ（600px×600px）を配置した、左右の縦に分かれたサイトを制作しています。 左のナビゲーションボタンをクリックすると右側のコンテンツ部分の 表示内容が変わるようにしたいのですが、これをページ移動するのではなく 右側のコンテンツ部分のみ横移動（するするとスクロールさせたいです）して表示させたいのです。 つまり、右コンテンツ部分のデフォルト表示サイズ（600px×600px）と同じ大きさのコンテンツが右側（非表示、下部スクロール表示無し）から現れるようにしたいのです。 また、同時にこの右側コンテンツ部分の表示切替を～秒とかある一定の時間で切り替わるようにしたいです。 FLASHを使用せずに制作したいのですが、これは可能でしょうか？？ みなさまのお知恵を拝借させていただきたく、ご質問させていただきました。 よろしくお願いいたします！
- ベストアンサー
- AJAX
- マウスホバーで見出しが変わるjquery
下記の参考URL先にあるようなマウスオーバーで見出しが変わるjquery？スライダーを探しています。 参考URL http://www.jfa.jp/samuraiblue/ 自分で探してみて一応それっぽいものは見付けることができたのですが、いずれも難があって使うことができません。 Image Rotator with DescriptionsやFeatured Content Slider Usingの場合、右側のリストをマウスホバーしても左側の画像や見出しを切り替えることができず、さらに右側リストをクリックしてマウスオーバーしていても左側の見出しがガンガン進んでしまうので使えませんでした。 参考URLhttp://designm.ag/previews/jquery-image-rotator/ 参考URLhttp://demo.webdeveloperplus.com/featured-content-slider/ http://www.jfa.jp/samuraiblue/にあるスライダーが一番理想的なのですが、似たような表現のできるjqueryプラグイン、又はその他の方法はないでしょうか？どうか宜しくお願いします。 ※jQuery初心者の為、伝わりにくいかと思いますがご容赦ください。
- ベストアンサー
- JavaScript
- jQueryで、画像クリック→フェードイン
初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。 かなりの初心者なのです。 今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。 これは何故なのでしょうか・・・。 スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){ $("#mainimg img").attr("src","img/topimg1.jpg"); $("#mainimg p:not(:animated)").fadeIn("slow"); }) ・・・・ 小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素（大きい画像が表示されるところ）の前に、id名にfadeInと入れた部分のpです。 スクリプトに何か問題があるのかどうかもわかりません。 しかしブラウザで作動しないのはおかしいですよね。 どなたか分かる方がいれば教えてくださると嬉しいです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- (JQuery）スライダーのサンプル探しています
jquery初心者です・・。 クライアントからの要望がありましたので（http://shop.benesse.ne.jp/ ）のようなjqueryのサンプルをずっと探しているのですがありそうでなかなかありません・・ 画像が入れ替わる時の動きに決まりはありません。 右に各コンテンツのサムネイルが縦に並んでいて左のメインイメージが連動して入れ替わり 画像をクリックするとコンテンツへリンクする。 といった動きです。 どなたかご存知の方教えていただけますでしょうか・・！ 何卒よろしくお願いいたします・・・！
- ベストアンサー
- CSS
- Jqueryでのマウスオーバー時の効果について
ホームページ作成に関してhttp://alyne.jp/#tab01のサイトにあるようなメニューをマウスオーバーするとメイン画像がフェードインするような効果を出すにはJqueryでどのようにすればいい のかわかりません…お教えいただけたらありがたいです。 dream weaverで作成したいのでわかりやすいコードがありましたらよろしくお願いいたします。
- 締切済み
- JavaScript
- 複数のボタンをクリックしてFLVを切り替え
複数のボタンをクリックしてFLVを切り替え Flash初心者です。 環境はWin XP、Flash CS3、as3、flash player9です。 複数のボタンをクリックすることによって、 表示するFLVを切り替えたいのですがやり方が分からず困っております。。 swf内の左側、縦にボタンを4つ配置し、それぞれをクリックすることにより右側のFLVが切り替わり、 再生ボタンをクリックして再生開始。という流れにしたいと思います。 自動再生はさせないです。 お分かりになる方教えていただきたいです。。 何卒よろしくお願いします。
- 締切済み
- Flash
- JQueryでサムネ付スライドショークロスフェード
JQueryでクリックを使用せず、自動クロスフェードのサムネイル付きスライドショー&マウスオーバーでもクロスフェードで切り替わるようにするためにはどうすればよいでしょうか？ 更にはスライドショーにキャプションがつけられたら最高です。 スライドショーの幅はwidth: 354px; height: 280px;、サムネイルはその下に縦3つ、横3つの計9つ配置します。 スライドショーは自動フォロスフェードによるループ、またサムネイルをマウスオーバーでもその画像にクロスフェードイン、その際スライドショー内に表示されている&マウスオーバーされているサムネイルの画像は罫で仕切るか、半透明がクリアに表示されるといった処理を考えております。 恥ずかしながら調べても分からなかったので、皆さまの知識を拝借したく投稿させて頂きました。 恐れ入りますが、何卒ご助言下さいますよう、よろしくお願い致します。
- 締切済み
- JavaScript
- 複雑なjQuery
このサイトはjQueryを使用していると思いますが、色々な要素が入ってます。 どのようなサンプルを使用しているのか分かる方教えてください。 １．ロゴがばらばらにフェードインします。 ２．下から上にページがスクロール（最初はスピードが速くて、最後は遅くスクロール）して トップページが表示されます。 ３．ロールオーバー（回転）でメニューボタンが変化してます。 ４．背景が何層かになっています。 ５．ビデオの埋め込み jQueryは初めてなので初心者です。 このサイトはとてもカッコいいです。 このようなサンプルデータが書かれている参考サイトを教えてください。 サンプルデータをダウンロードしたいです。 クリスチャン ダダのサイト http://www.christiandada.jp/
- ベストアンサー
- その他([技術者向] コンピューター)
- jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り
jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り替えるスクリプトについてご質問です。 http://medienfreunde.com/lab/innerfade/ html のロード時に数枚の切り替え予定の画像がスクリプトが 読み込まれる前に全部表示されてしまって格好が悪いので、 表示させないようにする為には、どうすればよろしいでしょうか？ 特に上記のスクリプトを用いなくても代替えのスクリプトがあれば、そちらでも構いません。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 早速参考にさせていただきトライしてみます。 結果、ご連絡いたします。
補足
アドバイスいただいたソースでほぼやりたかったことはうまくいきましたありがとうございます。 そこで大変恐縮ですが、右側の4つのボタンをさらにマウスオーバーするにはどうしたらよいのでしょうか。 また、別の質問になってしまうのですが、右側のボタンのスライスがきちんと出来、4つのボタンのhightと左のイメージのhightが同じなのに、右側各ボタンに隙間があいてしまうのです。 border-collapse:collapse;をCSSで対応しましたが解決しませんでした。