• ベストアンサー

複雑（？）な画像の切り替え

画像をクリック（通過でも可）すると違う場所の画像が切り替わるようにしたいのですが、どうすればよいのやらチンプンカンプンです。 やりたいことは table1（行1、列5）、table2（行1、列2）を作成 1.table1の各セル内に小さな画像を入れています。（サムネイルみたいな感じ） 2.table2の右側のセルに初期画像が、左側には初期テキストが入っています。 3.table1の画像をクリック（通過）するとtable2の右側には拡大画像が、左側には説明文が出る。table1の画像にそれぞれ拡大画像と説明文を設定したい。table1の画像は変更する必要はない。 簡単な画像切替（同じ場所の画像が切り替わるの）は何とか理解できるのですが、ちょっと複雑になるとさっぱりです。もしよろしければアドバイスお願いします。

  • CSS
  • 回答数5
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
noname#199778
noname#199778
回答No.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);"」などとすると、それを防ぐことができると思います。 長々と失礼しました。

jamslot
質問者

お礼

丁寧なご回答たいへん有難うございました。完璧です！！これが私の求めていた形です！本当に感謝です。JavaScriptはちょっと難しいくて四苦八苦しています。教えて頂いたコードを使いながら、サイトを完成させたいと思います。頑張ります。本当に有難うございました！

その他の回答 (4)

noname#199778
noname#199778
回答No.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=***; という処理を加えることで、いけると思います。 こちらの方法だと、明らかにテキスト表示部分に違和感ができてしまうので、デザイン・レイアウト的には少々難があるかもしれません。 参考になれば幸いです。

jamslot
質問者

補足

ご回答有難うございます。私は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)
回答No.3

そこまで判っているのであれば、 たとえばオンマウスのアクションの定義部分で、 onMouseOver="アクション1、アクション2、アクション3・・・" とするだけでＯＫだと思います。 アクション1＝table1 Aの画像切り替え アクション2＝table2 aの画像切り替え アクション3＝table2 bの画像切り替え もしかして2と3のアクションを定義する部分を共通化しておかしくしてませんか？

jamslot
質問者

お礼

ご回答有難うございました。なんとか思っていた通りのアクションを実行できました。またいろいろと質問することもあるかと思いますので、その際にはどうぞ宜しくお願い致します。

  • blue_leo
  • ベストアンサー率22% (541/2399)
回答No.2

gooで 「JAVA」and「スクリプト」and「TIPS」なんて入れてやれば色々出てきますよ。 たとえば、 http://www.din.or.jp/~hagi3/JavaScript/JSTips/Default.htm ここのコントロールパネルなんてあたりが参考になるかと。

jamslot
質問者

補足

有難うございます。このサイトは私もお世話になっております。いろいろ参考にしているのですが、何故か微妙にできないんです。 table1 ┌─┬─┬─┬─┬─┐ │ A│ B│ C│ D│ E│ └─┴─┴─┴─┴─┘ table2 ┌─┬─┐ │ a│ b│ └─┴─┘ table1のAを通過した際にtable2のaに画像をだすことはできましたが、同時にtable2のbにテキストを出すにはどうしたら良いのでしょうか？？コード必要でしたら補足要求して下さい。

  • blue_leo
  • ベストアンサー率22% (541/2399)
回答No.1

http://leche.goodcrew.ne.jp/leche/mobile_style/ こういうのに近いですかね？ なにか真似したいサイトがあるのだったらソースを保存するのが一番早いです。 またJAVAであればスクリプトなのかアプレットなのかはたまたサーバサイドなのか、それとも別の言語なのか？ 自分が今できると言っているのはなんなのか補足するといいでしょう。

jamslot
質問者

補足

早速のご回答有難うございます。そうです！こんな感じです。一応基礎的なHTML、JavaScript、CSSを勉強中です。難しいことはできませんが…見よう見まねでやってみます。いろんなサイトを見て、実地で覚えていこうとしておりますがなかなかうまくいきませんね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • テーブルに画像を入れると、テーブルの幅が広がってしまいます

    HTML初心者の者です。 ３行２列のテーブルを作り、左側の列に縮小した画像を入れたのですが、左側の列が画面いっぱいに広がってしまい、画像の幅に合わせて幅を狭くすることが出来ないでいます。 どうしたら、画像の幅に合わせて左列の幅を狭くすることが出来るでしょうか。 その部分のHTMLは、以下の通りです。 <table border="0" align="center"> <tr> <td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> </table>

    • ベストアンサー
    • HTML
  • 複数の画像切り替えと拡大表示

    ウェブサイトを作っています。 ２列のテーブルで、上列に画像（サムネイル）、下列に「拡大」ボタン、「一つ戻る」ボタン、「一つ進む」ボタンがあります。行いたい動作は、 ＊５つの画像（サムネイル）を、「戻る」「進む」ボタンのクリックで順番に切り替えて表示させる ＊「拡大」ボタンを押すと、そのときに表示されている画像（サムネイル）の拡大版が、別ウィンドウで表示される どのように記述すればよろしいでしょうか。よろしければアドバイスをお願いいたします。

  • Tableの1セル内に画像・テキストを均等貼り付けしたい

    初心者です。　HTMLと外部CSSについて教えていただきたく。 1列3行のテーブルの2行目に　複数枚の画像を均等に横並びに配置し、改行してそれぞれの画像の下に画像タイトル文を入れたいと考えています。　一つのセルの上行に画像下行にテキストといった考えです。　 列幅は750px　画像1枚の幅は最大350px。　この場合、下記のHTMLをどのように改変し、外部CSSはどのように書けばよいでしょうか。　ブラウザはIE7以降とFireFOX3.5.xを考えています。　 追記：このテーブルデザインをフォームとして他でも使いたいと考えています。　画像の枚数は2枚から最大4枚で変動します。　画像とタイトル文の間に不可視ラインを入れて1列4行のテーブルでもOKと考えております。 手を入れたいHTML　（写真3枚の場合。） <BODY> <CENTER> <TABLE border="1" width="750"> <TBODY> <TR> <TD align="center">1行目</TD> </TR> <TR> <TD>2行目　ここに写真3枚横並び　<ｂｒ>　写真1　写真2　写真3　　 </TD> </TR> <TR> <TD align="center">3行目</TD> </TR> </TBODY> </TABLE> </CENTER> </BODY>

  • 画像のアップが好きなレイアウトで組めるCGI

    埋め込み式のCGIを探しています。 やりたいことは↓ 掲示板に書き込むような作業だけで 簡単に画像を表示することができ、 大きなサイズの画像も自動的に縮小表示ができ、 クリックで拡大表示が可能。 さらにコメントもつけられ、テーブルなどで 例えば横に4列、縦に3行など好きにレイアウトが組める。

    • 締切済み
    • CGI
  • 画像の切り替えについて

    画像の切り替え操作に悩んでいます。 複数のサムネイルから、同じページの固定場所に画像を拡大表示することは出来たのですが、 さらにサムネイルをクリックして変わった画像の位置から、 １．次へ、前へのリンクでも画像が切り替わる、 ２．大きい画像のクリックでも画像が順に変わる。 ようにしたいと思っています。 今の時点では、現在大きく表示された画像がどのサムネイルの画像なのか、が認識されないため、順に表示することが出来ません。 よろしくお願いします。

  • gooブログで <br clear="XX">に代わるタグは？

    gooブログを使っています。 【やりたいこと】 複数の画像を左側に配置し、それぞれの画像に対する説明文を画像の右側に回り込ませたい。 【質問】 （1）一番目の画像を配置し、　<align＝"left">　を指定すれば、説明文が画像の右側に回りこむ。 （2）二枚目の画像を配置したとき、一枚目の画像の右側に回りこんでしまう。　<br clear="left">　がサポートされていれば、二番目の画像を一枚目の画像の下に配置することができる。 （3）<br clear="left">　に代わる方法はありませんか？ <table>　を使えばできますが、　<table>　以外の方法は無いのでしょうか？ よろしくお願いします。

  • テーブル内の画像を横並べにしたい

    HTMLテーブルの学習中の初心者です、よろしくお願いいたします。 テーブル内に画像を配置すると縦並びになってしまいます。 これを横並びにしたいのですが、（添付画像参照ください） 同じテーブルの上段には既に列を分けてある1行目があります。 問題の2行目、列を分けてそれぞれのセルに画像を当て横幅を指定 という方法ですと上段の横幅に揃ってしまうのか、幅が大きく広がり過ぎてしまいうまくいきません。 テーブル以外にも方法はあるようなのですが 現在テーブルの学習をしているためテーブルでのやり方を調べています。 初心者ですので解りやすいもっともシンプルなやり方ございましたら ぜひご指導お願いいたします。

  • 画像クリックした後別ウィンドウで表示

    過去の質問を調べてみましたが無かったのでご質問させて頂きます。 とあるページに小さい画像が右に並んでいて、左に大きい画像がある ページがあります。 その右側の小さい画像をクリックすると左側の画像が小さい画像の拡大版が 表示されます。 ここまでは過去ログにありましたが、その左側の画像をクリックすると 別ウィンドウでそのクリック後に変わった画像が表示したいのです。 別ウィンドウはhtml表示でなくてもイメージの直表示でOKなのですが 説明足らずでわかりにくい点等ございますが、ご指導頂ければ幸いです。 宜しくお願い致します。

  • 数値の自動コピーができるプログラムについて

    お世話になります。 画像のようにエクセルデータがあるのですが、画像左側の何も入力されていないシートの 先頭行について 例えばA1セルに１を入力すると画像右側の先頭行と同じ列の数字が列Aに自動的にコピーできるようなプログラムがあると助かります。（画像左側のシート１１，１２，１３それぞれに適用できるとありがたいです） 最初はHLOOKUP関数で参照を試みたのですが、画像右側のデータで入力されていないものには０が返されてしまい、都合が悪い状態になってしまいます。 （右側のデータにないところには左側のデータにも関数を含めて入力されていないものを希望するためマクロ、VBAがいいのではないかと考えました） 詳しい方のアドバイスが頂けますと幸いです。よろしくお願いします。

  • DreamWeaver8 テーブル間のセル行幅変更

    DreamWeaver8にて4行3列のテーブルを作成しました。 各セルの中に画像を隙間なく埋め込もうとしているのですが、 画像の上下に余白がついてしまうので、セル幅を変えようと セルのラインをクリック→ドラッグして行幅を狭くしたいのですが、 他の動かしたくないセルの行幅までも動いてしまい、テーブル全体が 大きくなってしまいます。 任意の１つのセルのみ行列幅を変更したい場合はどのように すればよろしいのでしょうか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する