- 締切済み
ボタンクリックで画像を替えたい
はじめまして。 ホームページを作成しているのですが、解決できない問題があり 皆様方のお知恵を拝借したく投稿させていただきました。 どうかお力添えをいただけますと幸いです。 具体的な内容としまして、 大きな画像（400px×125px）の下に横並びでボタン（80px×25px）を5つ配置しているのですが そのボタンをクリックすると大きな画像部分がクリックしたボタンに あわせて入れ替わって表示されるようにしたいのです。 ボタンA → 画像A ボタンB → 画像B ボタンC → 画像C ボタンD → 画像D ボタンE → 画像E という風に変化させていのですが 今ひとつ方法がわからずに苦しんでいます。。 これをFLASHをつかわず作成したいと考えています。 説明不足、言葉足らずなどあるかとは思いますが どなたかお力添えをいただけませんでしょうか。 よろしくお願いいたします。
- amanda1976
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
＃１です。みたびすみません。 function ( node ) { var e = node, c = 0; while( e = e.previousSibling ) if( e.nodeName == node.nodeName ) c++; return c; }, です。あぁ～だめだ。
- babu_baboo
- ベストアンサー率51% (268/525)
やっぱり、みすってました。ていせいします。 function ( node ) { for( var c = 0; node = node.previousSibling; c++ ); return c; }, を function ( node ) { var e = node, c = 0; while( e = node.previousSibling ) if( e.nodeName == node.nodeName ) c++; return c; }, に！です。
- babu_baboo
- ベストアンサー率51% (268/525)
HTMLくらいは、かこう！ ぜんかくくうはくは、すべてはんかくにしてね めんどうなかきかたで、すみません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> #viewImage { width : 400px; height : 125px; } #list { margin : 0; padding : 0; } #list li { display : inline; border : 2px #eee outset; list-style-type : none; } #list li img { width : 80px; height : 25px; border : 0px none; } </style> <div> <img src="image0_dekkaiyatu.jpg" alt="image0_dekkaiyatu.jpg" id="viewImage"> </div> <ul id="list"> <li><img src="image0_mini.jpg" alt="0"></li> <li><img src="image1_mini.jpg" alt="1"></li> <li><img src="image2_mini.jpg" alt="2"></li> <li><img src="image3_mini.jpg" alt="3"></li> <li><img src="image4_mini.jpg" alt="4"></li> </ul> <script type="text/javascript"> //@cc_on var L = [ 'image0_dekkaiyatu.jpg', 'image1_dekkaiyatu.jpg', 'image2_dekkaiyatu.jpg', 'image3_dekkaiyatu.jpg', 'image4_dekkaiyatu.jpg' ]; var LL = []; for( var c = 0, t; L[c]; c++ ) { t = new Image; t.src = L[c]; LL.push( t ); }; document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', (function( get, cnt, set, on, off ) { var m = null; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if( 'IMG' === e.nodeName && get(e, 'id', 'list') ) { off( m ); set( cnt( m = e.parentNode ) ); on( m ); } }; })( function ( node, type, val ) { return node ? ( val == node[type] ) ? node: arguments.callee( node.parentNode, type, val): null; }, function ( node ) { for( var c = 0; node = node.previousSibling; c++ ); return c; }, (function( e, l ) { return function ( n ) { e.src = e.alt = l[ n ].src; }; })( document.getElementById( 'viewImage' ), LL ), function ( e ) { if( e ) e.style.borderStyle = 'inset'; }, function ( e ) { if( e ) e.style.borderStyle = 'outset'; } ), false); </script>
関連するQ&A
- ボタンクリックによる画像の変更
はじめまして。 色々と調べたり考察してみたのですが方法が見つからないので質問致します。 □□□□ □□■□ ○ボタン □□□□ □、■＝画像ファイル 同一フレームの中に上図のように数個の画像ファイルが並べてあります。 その横にボタンを配置します。 そのボタンをクリックすることで■の画像ファイルをAからBに変更すること可能でしょうか？ また、可能であればその方法を教えて下さい。
- ベストアンサー
- HTML
- IE11 チェックボタン画像指定でクリックできない
初めまして。JQuery・JavaScriptの初心者で大変恐縮ではございますが、質問させていただきます。 今回、下記参考URLを参考にして、チェックボタンの画像指定に取り組みました。 参考URL http://sygnas.jp/2012/01/30/jquery%E5%80%8B%E5%88%A5%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E3%83%A9%E3%82%B8%E3%82%AA%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%84%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9/ 先日、IE9・IE10においてシングルクリックで指定する事ができなかったため質問させていただき、 お力添えのおかげで無事解決する事ができました。 http://okwave.jp/qa/q8316646.html しかし、その後IE11にて動作確認を行ったところ、ダブルクリック・シングルクリックいぜんの問題として 指定すらできなくなっている事が判明しました。 IE11においてシングルクリックで実装する場合にはどのように行えばよろしいのでしょうか？ また、その他でもおすすめの方法等ございましたら是非お教えいただきたく思っております。 何卒よろしくお願い致します。
- 締切済み
- JavaScript
- ボタンクリックでスライドするメニューについて
質問させていただきます。 --------- ■制御ボタン：2つ △配置ボタン：4つ（幅各130px） 画像：ボタンとリンクした画像4枚を配置ボタンクリックで切り替え --------- 左右に制御ボタンを配置し、 その間を、130pxずつ右または左にスライドして移動する ボタンメニューを作成したいと考えております。 ↓イメージです。（■：制御ボタン △：画像表示用ボタン 左の■ボタンを押すと△が左に130px分移動 右も同様に右に130px分移動する） ■△△△△■ 各△ボタンを押すと、メニューの上の領域に ボタンに対応した画像が表示されます。 Flash初心者のため、一からスクリプトを書くことが出来ず 同じ動きをするサンプル、またはカスタマイズ前提の参考サイトを 探しておりますが カーソルで△が動くものはあるものの、ボタンで動くものを見つけることが出来ずにいます。 参考サイトをご存知の方、または作成方法をご教示頂ける方が居られましたら何卒よろしくお願いします。 《環境 WinXP Flash8》
- ベストアンサー
- Flash
- 画像で作成したボタンの処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cを一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)画像Aがクリックされたら、画像Aを画像A2に置き換える (2)画像A2が表示されている状態で、画像Bをクリックすると、画像A2は画像Aとなり、画像Bは画像B2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみ画像A2となり、カーソルが離れると画像Aに戻ってしまうが、クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でif文でできるような気がするが、サンプルとなるものがなく、書き方がわからない…。 上記について、ご回答よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- ボタン（画像）をクリックするたび表を切り替える方法
HTMLとcssで組み立てたサイトのページ内に設置したいものです。 タイトルボタン（画像 W300px）の下に表Ａ（簡単な<table>内にテキストがあるW300 H400くらいのもの）があって、 タイトルボタンをクリックするたびに表Ｂ、表Ｃに切り替わるようにしたいのですが、 JavaScriptか何かで可能でしょうか。 表の大きさはすべて同じです。 画像切り替えはできたのですが、どうしてもテキストありの表を切り替え表示したく、 悩んでおります。 宜しくお願い致します。
- ベストアンサー
- HTML
- クリックによる画像の入れ替え処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cが一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)Aがクリックされたら、AをA2に置き換える (2)A2が表示されている状態で、Bをクリックすると、A2はAとなり、BはB2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみA2となり、カーソルが離れるとAに戻ってしまう。 クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でできるような気がするが、サンプルとなるものがなく、書き方がわからない。 （調べても、ほとんどが一つのコンテンツスペースに複数の画像をクリックで切り替えて表示する、というものばかりでした） 上記について、ご回答よろしくお願いします。
- 締切済み
- JavaScript
- ボタンのクリックについて
ボタンのクリックについて質問です。 CreateWindow()を使ってボタンを作成して表示させているのですが、 ボタンに画像などを表示させている時にクリックをすると、 一瞬、画像などが表示されていない状態になります。 裏画面処理でやってみたりしたのですが出来ませんでした。 やりたい事としては、 http://hp.vector.co.jp/authors/VA018351/ のようにボタンをクリックしても、ちらつきがない様にしたいです。 開発環境 XP Visual Studio 2005 C、C++
- ベストアンサー
- C・C++・C#
- 背景画像を切り換えるボタンのようなものを探しています
背景画像を切り換えるボタンのようなものを探しています 自分で調べてはみたのですが見つかるのは時間や曜日ごとに切り換えるものでボタンやリンクを使った背景画像の切り替えがなかったので質問させてもらいました A.jpgとB.jpgを同じ階層に配置してC.htmlというページでボタンやリンクなどを使って訪問者が切り換えられるようにしたいです 分かりにくくて申し訳ありませんがよろしくお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- これらの画像のサムネイルをクリックしても違う画像（
これらの画像のサムネイルをクリックしても違う画像（黒いTシャツの画像）が表示されてしまうのですがどうすればよいですか。 https://f.hatena.ne.jp/t/%E3%82%A6%E3%82%A7%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%89%E3%83%AC%E3%82%B9
- 受付中
- その他（Webサービス・アプリ）
- FLASHのボタンに関するアクションを教えてください！
FLASHを使い始めたのですがどうしてもわからないところがあり困っています。大変お手数ですが教えて下さい！ 画面上にAというボタンをたくさん並べます。Aは見た目が同じなので、場所はランダムに並べています。これが10個あります。それぞれA-01、A-02という形で並んでいるとして、A-01の上にマウスをあわせるとB-01.jpgという画像が出てくるように設定したいのです。もちろんあわせるだけで、マウスをクリックするわけではありません。別のA-02のボタンをクリックするとB-02の画像がA-01のボタンを押したときに出た画像に変わって同じ場所に配置されるようにしたいのです。また、このボタンをクリックした場合はそれぞれ別のページへリンクもさせたいと思っています。 マウスを乗せると別の場所に画像が表示され、さらにクリックすると別のページにジャンプするといったボタンを作成することは可能でしょうか？大変お手数ですが教えていただければ幸いです。よろしくお願いいたします。
- ベストアンサー
- Flash
