- ベストアンサー
複雑（？）な画像の切り替え
画像をクリック（通過でも可）すると違う場所の画像が切り替わるようにしたいのですが、どうすればよいのやらチンプンカンプンです。 やりたいことは table1（行1、列5）、table2（行1、列2）を作成 1.table1の各セル内に小さな画像を入れています。（サムネイルみたいな感じ） 2.table2の右側のセルに初期画像が、左側には初期テキストが入っています。 3.table1の画像をクリック（通過）するとtable2の右側には拡大画像が、左側には説明文が出る。table1の画像にそれぞれ拡大画像と説明文を設定したい。table1の画像は変更する必要はない。 簡単な画像切替（同じ場所の画像が切り替わるの）は何とか理解できるのですが、ちょっと複雑になるとさっぱりです。もしよろしければアドバイスお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
補足見ました。 補足されたソースでは、イベントハンドラで直接処理を書いていますので、今回の動作を実現させるスクリプトを書き込むとソースが込み入ってわかりにくくなってしまうと思います。 今回の場合は、画像の入れ替えも含めて、処理を関数に収めてしまい、イベントハンドラからその関数を呼び出すような形にすると、見通しが良くなると思います。 以下に、そのままソースを書いてしまいますね。 <script type="text/javascript"><!-- var msg= new Array(); msg[0]="1枚目の説明文"; msg[1]="2枚目の説明文"; msg[2]="3枚目の説明文"; msg[3]="4枚目の説明文"; msg[4]="5枚目の説明文"; /* 上記部分で画像の説明文を定義します。 画像の数だけ配列の要素を作って、説明文を入れておいて下さい */ function changeImg(i,j){ document.img_t2.src=i; if (document.getElementById){ document.getElementById("explain").innerHTML=msg[j]; } } /* 上記の関数で、1行目は画像の入れ替え、それ以降は説明文の切り替えをしています。 i,jはそれぞれ引数で、関数の呼び出し側で定義します。 第1引数(i)が画像のURI、第2引数(j)が表示する説明文の配列番号です。 */ // --> </script> 上記を<head>内に入れて(スクリプトの説明文(/* ～ */の部分)は必要ありません)、<body>部分は <!--table1--> <table> <tr> <td><a href="#" onMouseOver="changeImg('t1b.jpg',0);"><img src="t1a.jpg"></a></td> <td><a href="#" onMouseOver="changeImg('t2b.jpg',1);"><img src="t2a.jpg"></a></td> <td><a href="#" onMouseOver="changeImg('t3b.jpg',2);"><img src="t3a.jpg"></a></td> <td><a href="#" onMouseOver="changeImg('t4b.jpg',3);"><img src="t4a.jpg"></a></td> <td><a href="#" onMouseOver="changeImg('t5b.jpg',4);"><img src="t6a.jpg"></a></td> </tr></table> <!--table2--> <table> <tr> <td><img src="table2_1.jpg" name="img_t2"></td> <td><span id="explain">初期文章</span></td><!--ここを変更したい--> </tr> </table> これでいけると思います。 DOMを利用する方法がうまくない場合は、スクリプト部分の「if (document.getElementByID){」からの3行を document.form1.box1.value=msg[j]; の1行に書き換え、テーブル2の「<span id="explain">初期文章</span>」を <form name="form1" action=""> <textarea name="box1" rows="5" cols="40" readonly="readonly">初期文章</textarea> </form> としてみてください。 一応、手元ではWIN上のIE6/Netscape7で両方の、Opera6.05で後者(form/textareaを使った例)の動作を確認しました。 ついでに、サムネイルの要素を含んでいる<a>要素ですが、このままですとサムネイルをクリックされたときにウィンドウがページのトップに飛んでしまうかもしれません。 <a>要素内に「onClick="return false;"」と追加するか、href属性を「href="javascript: void(0);"」などとすると、それを防ぐことができると思います。 長々と失礼しました。
その他の回答 (4)
画像の切り替えについてはすでに解決していると思いますので、テキストの切り替えのほうについてアドバイスします。 テキストの切り替え(というか、書き換え)は、現状ではIE5以上、Netscape6以上のブラウザのみの対応になりますが、DOMのメソッドを利用した方法で実現できます。 まずテキストの書き換えを行いたい箇所に、特定のID名を設定した<span>要素を配置してから、JavaScriptからテキストの変更を行う処理を行います。 具体的には、スクリプトは if (document.getElementById){ document.getElementById("設定したID名").innerHTML= ***; } という記述になります。 スクリプトをif文で囲んでいるのは、DOMのメソッドに対応していないブラウザでのエラー対策です。 例中の、「***」の部分は変更後のテキスト内容を入れます。 HTMLタグも使用可能です。 なお、変更後のテキスト内容として、変数や配列を利用することも当然できます。 上記を画像を転換する関数の中に組み込めば、スクリプトの見通しも良くなると思いますよ。 あと、表示させる部分には、<span id="固有のID名"></span>を忘れずに入れておけば、正常に動くと思います。 ただ、それ以外の対応していないブラウザに配慮するのであれば、<form>要素と<textarea>要素を利用して、そこに説明文を書き出すとか、説明文自体を画像化してそれも一緒に変更させる方法が良いかもしれません。 <form>要素と<textarea>要素を利用する場合は、HTML部は説明文を表示させたいところに以下のような記述を配置し、 <form name="form1" action=""> <textarea name="box1" rows="5" cols="40" readonly="readonly">ここに説明文が表示されます</textarea> </form> スクリプト部分には document.form1.box1.value=***; という処理を加えることで、いけると思います。 こちらの方法だと、明らかにテキスト表示部分に違和感ができてしまうので、デザイン・レイアウト的には少々難があるかもしれません。 参考になれば幸いです。
補足
ご回答有難うございます。私はMac IE5.0を使用しています。 上記のスクリプトを埋込んでみましたがうまくいきません。（対応してないのかな？）画像の切替までのコードです。教えて頂いたスクリプトは<head><script></script></head>内に埋込んで良いですよね？ <!--table1--> <table> <tr> <td><a href="#" onMouseOver="img_t2.src='t1b.jpg';"><img src="t1a.jpg"></a></td> <td><a href="#" onMouseOver="img_t2.src='t2b.jpg';"><img src="t2a.jpg"></a></td> <td><a href="#" onMouseOver="img_t2.src='t3b.jpg';"><img src="t3a.jpg"></a></td> <td><a href="#" onMouseOver="img_t2.src='t4b.jpg';"><img src="t4a.jpg"></a></td> <td><a href="#" onMouseOver="img_t2.src='t5b.jpg';"><img src="t6a.jpg"></a></td> </tr></table> <!--table2--> <table> <tr> <td><img src="table2_1.jpg" name="img_t2"></td> <td>初期文章</td><!--ここを変更したい--> </tr> </table> 初期文章の部分を5つ変更したいのです。ということは最初のスクリプトでIDを5つ用意すると言うことでよいですか？5つ並記するのはどうしたらよいでしょう？ たくさん質問してしまい大変申し訳ございません（汗） もしよろしかったら、アドバイスお願いします。
- blue_leo
- ベストアンサー率22% (541/2399)
そこまで判っているのであれば、 たとえばオンマウスのアクションの定義部分で、 onMouseOver="アクション1、アクション2、アクション3・・・" とするだけでＯＫだと思います。 アクション1＝table1 Aの画像切り替え アクション2＝table2 aの画像切り替え アクション3＝table2 bの画像切り替え もしかして2と3のアクションを定義する部分を共通化しておかしくしてませんか？
お礼
ご回答有難うございました。なんとか思っていた通りのアクションを実行できました。またいろいろと質問することもあるかと思いますので、その際にはどうぞ宜しくお願い致します。
- blue_leo
- ベストアンサー率22% (541/2399)
gooで 「JAVA」and「スクリプト」and「TIPS」なんて入れてやれば色々出てきますよ。 たとえば、 http://www.din.or.jp/~hagi3/JavaScript/JSTips/Default.htm ここのコントロールパネルなんてあたりが参考になるかと。
補足
有難うございます。このサイトは私もお世話になっております。いろいろ参考にしているのですが、何故か微妙にできないんです。 table1 ┌─┬─┬─┬─┬─┐ │ A│ B│ C│ D│ E│ └─┴─┴─┴─┴─┘ table2 ┌─┬─┐ │ a│ b│ └─┴─┘ table1のAを通過した際にtable2のaに画像をだすことはできましたが、同時にtable2のbにテキストを出すにはどうしたら良いのでしょうか？？コード必要でしたら補足要求して下さい。
- blue_leo
- ベストアンサー率22% (541/2399)
http://leche.goodcrew.ne.jp/leche/mobile_style/ こういうのに近いですかね？ なにか真似したいサイトがあるのだったらソースを保存するのが一番早いです。 またJAVAであればスクリプトなのかアプレットなのかはたまたサーバサイドなのか、それとも別の言語なのか？ 自分が今できると言っているのはなんなのか補足するといいでしょう。
補足
早速のご回答有難うございます。そうです！こんな感じです。一応基礎的なHTML、JavaScript、CSSを勉強中です。難しいことはできませんが…見よう見まねでやってみます。いろんなサイトを見て、実地で覚えていこうとしておりますがなかなかうまくいきませんね。
お礼
丁寧なご回答たいへん有難うございました。完璧です！！これが私の求めていた形です！本当に感謝です。JavaScriptはちょっと難しいくて四苦八苦しています。教えて頂いたコードを使いながら、サイトを完成させたいと思います。頑張ります。本当に有難うございました！