- ベストアンサー
jQueryを使ってサイトのグローバルメニュー下のFlashコンテンツを動的に切り替える方法
- jQueryを使用して、サイトのグローバルメニュー下のFlashコンテンツを動的に切り替える方法を紹介します。
- ボタンをクリックすると、リンク先のページに遷移しながら、左側のイメージが変更されます。
- フェードインなどの動的なエフェクトは不要で、静的なイメージの切り替えのみを行う方法です。
- 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
お礼
ありがとうございます。 早速参考にさせていただきトライしてみます。 おそらく紹介いただいたサイトと同じことを考えておりましたので 可能かと思います。 結果、ご連絡いたします。
お礼
ありがとうございます。 早速参考にさせていただきトライしてみます。 結果、ご連絡いたします。
補足
アドバイスいただいたソースでほぼやりたかったことはうまくいきましたありがとうございます。 そこで大変恐縮ですが、右側の4つのボタンをさらにマウスオーバーするにはどうしたらよいのでしょうか。 また、別の質問になってしまうのですが、右側のボタンのスライスがきちんと出来、4つのボタンのhightと左のイメージのhightが同じなのに、右側各ボタンに隙間があいてしまうのです。 border-collapse:collapse;をCSSで対応しましたが解決しませんでした。