• ベストアンサー

JavaScript*テーブルごとにデータを用意して、クリックで表示を切り替える方法

宜しくお願いします。 JavaScriptはほとんど初心者です。 タイトルがかなりわかりずらいと思いますが… こちらのサイトで使われているJavaScriptについての質問です。 http://miel-osaka-wedding.jp/bridalfair/bridalfair.html こちらのブライダルフェアの表示方法は、 左側の日にちをクリックしたら、右側に表示される情報が切り替わる、という表示方法です。 HTMLデータ上では、現在表示されている情報の他にもズラっと表示されています。それが、日にちをクリックすることにより、定位置にそれぞれの情報が表示されるようになっています。 それぞれの情報は、テーブルで区切られています。 そこで、ページをDLしてソースを見て研究したのですが、どうしても分からない箇所があります。 それは、フェア情報の右に配置されている4つのアイコン（マウスオーバーで画像が変わるものです）を削除すると、このJavaScriptが機能しなくなってしまいます。 ページを見ているうちに、「マウスオーバーで切り替わる画像」がJavaScripに影響しているように思ったのですが、 どう連動しているのか、なぜ機能しなくなるのかが分かりません。 （HTMLファイルとは別に、「js」という拡張子のファイルもありました。） もし、分かる方がいらっしゃいましたら教えていただけませんか？ もしくは、これと同じ表示方法について説明をされているサイトなどありましたら教えて頂けると嬉しいです。 ちなみに、使用しているソフトはDreamWeaverMXです。 至らない点があるかとはおもいますが、どうぞ宜しくお願いします。

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

  • ベストアンサー
  • chinensis
  • ベストアンサー率40% (54/132)
回答No.3

日付をクリックすることで表示される内容を切り替える処理は、<head>内の <script language="JavaScript" src="../browser2.js"></script> で定義されています。 このJavaScriptファイルが無いと当然動作しません。 具体的には以下のfunctionです。 function on(id){ var num = id.substr(4,1); for(i=1;i<10;i++){ document.getElementById("plan" + i).style.display = "none"; } document.getElementById("plan" + num).style.display = "block"; } 実質displayプロパティの値を変更することで表示/非表示を切り替えています。 各々のテーブル要素は、<div id="planX">～</div>でソース内に定義されています。 ご質問の「右の画像リンクを削除すると機能しなくなる」は、ソース上からは見受けられません。ごく普通のリンクです。 仮にリンクを削除したとして、動作しなくなると考えられるケースとしては、 １．テーブルのタグの対応が壊れている。（文法エラー） ２．<div></div>の対応が壊れている。（文法エラー） ３．必要なJavaScript functionが定義されていない。 が、咄嗟に考えつく原因です。 確認手順として、 １．ソースをDLする。 ２．http://miel-osaka-wedding.jp/browser2.jsをDLする。 ３．ソースのヘッダの<script language="JavaScript" src="../browser2.js"></script>を自身の環境に合わせて修正する。 これで正常に動作したら、 ４．不要なリンクを削除する。 で大丈夫だと思います。ただ、このサイトのソースを参考にする場合、インデントが若干ずれていますので、一度ソース全体を綺麗にする方が、修正する際には安全かと。

OmarieO
質問者

お礼

ご回答ありがとうございます。 右部分の画像ですが、DreamWeaver上でテーブルごと指示して一気に削除すると機能しなくなっていたのですが、タグで画像とテーブルを一つ一つ削除すると何故かちゃんと機能しました。。 なんとか、無事動きそうです！ ずっとDreamWeaverに頼りっぱなしだったのでタグも勉強しなくてはな…と思いました。 本当に丁寧にありがとうございました！そしてお騒がせしました。

その他の回答 (2)

  • mr_kjapan
  • ベストアンサー率63% (29/46)
回答No.2

こんな感じかな？ <html> <head> <title>???????</title> <script language="JavaScript"> <!-- function on(ab){ for(i=1;i<=9;i++) { document.all("text"+i).style.display = "none"; document.all("text"+ab.charAt(4)).style.display = "block"; } } function dsp(){ document.all("text1").style.display = "none"; document.all("text2").style.display = "none"; document.all("text3").style.display = "none"; document.all("text4").style.display = "block";　//あらかじめ表示させておく要素 document.all("text5").style.display = "none"; document.all("text6").style.display = "none"; document.all("text7").style.display = "none"; document.all("text8").style.display = "none"; document.all("text9").style.display = "none"; } //--> </script> </head> <body onload="dsp();"> ・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・ <a href="#" onClick="on('text1')">あああ</a> <a href="#" onClick="on('text2')">いいい</a> <a href="#" onClick="on('text3')">ううう</a> <a href="#" onClick="on('text4')">えええ</a> <a href="#" onClick="on('text5')">おおお</a> <a href="#" onClick="on('text6')">かかか</a> <a href="#" onClick="on('text7')">ききき</a> <a href="#" onClick="on('text8')">くくく</a> <a href="#" onClick="on('text9')">けけけ</a> ・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <div id="text1"> <table width="450" height="200" border="0" cellpadding="0" cellspacing="0"> ・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・ </table> </div> <div id="text2"> <table width="450" height="200" border="0" cellpadding="0" cellspacing="0"> ・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・ </table> </div> ・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・ <div id="text9"> <table width="450" height="200" border="0" cellpadding="0" cellspacing="0"> ・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・ </table> </div> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ </body> </html>

OmarieO
質問者

お礼

わざわざソースを書いて下さってありがとうございます。 これから研究しようと思います＾＾ JavaScriptを別ファイルにして呼び出すよりも、HTMLに埋め込む方が楽そうですね～。 JavaScript、いろいろできて奥が深いですね…。 どうもありがとうございました！

noname#19197
noname#19197
回答No.1

HTMLソースを見ましたが、おそらくスタイルのdisplay要素を使って隠してるだけだと思います。 折りたたみメニューでよく使われる手法です。 DreamWeaverは使ったことがないので分かりません。すいません。 同じようなサンプルは探すことができませんでした。本当にすいません。

OmarieO
質問者

お礼

いえいえ、ご回答ありがとうございます＾＾ 折りたたみメニューですか～。 使おうとして、少しいじってみたことがあるのでそちらの方向でも考えてみます！ メルパルクさんの見せ方は、まさに「これだ！！」という方法だったので見つけた時は嬉しかったのですが 実際見てみたら私には難しかったです。。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • テーブルの表示制限？

    日記サイトを作っています。 PHP+MySQLで投稿から表示まで出来たので こんどはデザイン面を作ろうと思っています。 日記の内容が増えてくると見るほうも面倒になると思うので タイトルと日付だけを表示させて「続きを読む」ボタンを押すとズラっと本文が表示される。 というような方法をとりたいのですが たとえばタイトル、本文、日付の項目でテーブルを作って ボタンがクリックされたときに本文を表示する。 というのはJavascriptで可能でしょうか？ Dreamweaverの体験版を使ってみたのですが、WEBページ上に配置されている記事を 見ている人が自由に配置変更できる「レイヤーのドラッグ」 という機能があったのできっと今回のような処理も Javascriptでできるのでは？とおもって質問することにしました。 アドバイスよろしくおねがいします。

  • postデータのあるページの再表示

    postデータのあるページをjavascriptを使って、再表示しようとしているのですが、 window.opener.location.reload(true); のjavascript を実行したら、 情報を再送信しないと、ページを更新できません。 ［再試行］をクリックして情報を送信するか、 ［キャンセル］をクリックして表示しようとしていたページに戻ってください。 のようなメッセージボックスが出てしまします。 回避（出なくする）方法はないでしょうか？ # javascriptの方の質問か悩みましたが、こちらにしました。 よろしくお願いします。

    • ベストアンサー
    • CGI
  • HTML上の画像にマウスオーバーして、同HTML内にswfを表示させたい

    HTMLページ内のサムネイル画像にマウスオーバーして大きい画像を表示させるJavaScriptがありますが、そういうイメージでswfの表示ができないでしょうか。 マウスオーバーじゃなくて、クリックでもいいのですが、ポップアップウインドウや別ページに表示させるのではなく、サムネイル画像をクリックすると、同一ページのお決まりの場所でswfムービーを表示させたいのです。 表示させるムービーは、音声が流れたり、swf内で数ページクリックして内容が見れるものです。誰か、ご存知の方、いらっしゃいませんか？よろしくお願いします。

    • ベストアンサー
    • Flash
  • Javascriptで表示のページをPHPで読む

    Javascriptを使って表示されているウェブのコンテンツをPHPで読み込む方法について教えてください。 HTMLで作られている場合は「file_get_contents」でHTMLソースを取得できますが、Javascriptを使って表示されたページのソースを読み込むにはどのようにしたらよいのでしょうか。 読み込みたいページは下記のような構造になっています。 <html> <head> </head> <body> <h2>タイトル</h2> //ここのコンテンツ部分がJavascriptをONにしないと見えない。 </body> </html>

    • ベストアンサー
    • PHP
  • JavaScriptでテーブルをクリックするとPOST送信させる処理について

    テーブルに表示されている値をマウスを利用して取得したいと 考えております。 質問箱及びいろいろ検索してみたのですが、いま一つ理解できません でしたので、お力添えの方宜しくお願い致します。 今回お教え願いたい処理と致しましては、単純にHTML内のBodyタグ内に 記述されている<td>テスト</td>の値をマウスでクリックすると取得 するというものです。 この処理に関しまして、検索すると多くのサイト、書籍が見つかり、 手法なども記述されていましたが、具体的な利用方法が見つけられず、 困っております。 参考サイトへの誘導も大歓迎ですので、宜しくお願いします。 備考：この処理の解決方法に >>　tdに付けたイベントハンドラからXMLHttpRequestを呼ぶだけ。 引用サイト：「JavaScriptを教えてもらう」 というものがあったのですが、この利用方法が理解できませんでした。 大変お手数とは思いますが、利用方法をお教え願えれば幸いです。 何卒、宜しくお願い致します。

  • キーワードをクリックすると説明文をする表示方法

    最近「キーワード」をマウスでクリックしたり、乗せたりするとキーワードの説明が、キーワード付近に表示されるサイトを見ます。 その実装方法が分からずに困っています。 下記の流れで実現するのかと考えています。 (1)キーワードの説明分をHTMLの最後に列記してCSSのdisplay:noneで非表示にする。 (2)クリックされた「キーワード」のウィンドウに対するマウス座標をJavascriptで取得する。 (3)座標を元に「キーワード」に対応する説明分をCSSで絶対配置してdisplay: blockで表示する 特に(2)の方法が分からずにいます。 上記の流れでよいのかも自信がないです。どのような方法でも実現できれば大変うれしいです。手がかりだけでも教えていただければと考えています。 よろしくお願いします。

  • マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptを探しています

    マウスを乗せると、画像ファイルを拡大して表示してくれるJavaScriptってないですかね？ ■はじめは、サムネイルのような小さい画像を表示。 ■マウスを乗せると少し大きくなる。 ■もっと、大きい画像が見たい場合はクリックして見ることができる。 こんな使用を考えているのですが、私の力では、一から書くことなど到底できそうにありません。 どなたか、こういったことを作ったページや参考になるページなどありましたら教えてください。 宜しくお願い致します。

  • Javascriptで生成されたページの情報取得方法

    Javascript初心者です。 ある画面で検索条件を指定して、送信ボタンを押下すると、検索結果をJavascriptで生成したページで表示するサイトがあります。結果はテーブルで表形式に表示されます。 この検索結果をJavascriptかVBscriptで取得したいと考えています。 HTML情報とテキスト情報両方とも取得できたらうれしいです。 document.all(1).innerHTML で取得しても、実際の画面に表示されているHTMLとは異なる情報しか取得できません。 生成後のHTML情報の取得方法をご教授ください。

  • クリックでメニューを表示

    初心者で申し訳ないのですがお答えいただけたらと思います。 親メニューに当たる画像orテキストをクリックして 指定箇所に子メニューを表示させ、 その子メニューをクリックしてリンクさせたいと思っているのですが JavaScriptでできるのかどうか、 もしできるのであればどう組めばいいのか よろしくお願いします。 形的には、 http://www.ozaki-gasrange.co.jp/cso_q1-3.html ↑ページのような感じで、 マウスを置いた時ではなく、クリックして 下にメニューを表示させて さらにそのメニューをクリックして右枠にページを 表示させたいと思います。 どうぞよろしくお願いします。

  • JavaScriptでPHP実行する方法

    質問させて頂きます。 現在、JavaScriptを用いて、DB内に登録されている画像を読み込み（複数の中から1つ）表示させたいと考えています。 JavaScriptを用いて画像を読み込み表示させるといった実装を行ったことが無いので、一般的に行われてる方法を教えて頂けないでしょうか。 私の考えている方法としては、 HTMLファイル上のJavaScriptでajaxというものを用いてPHPを実行させ、PHP上でDBの中から画像情報をランダムでひとつ読み込み、その情報をHTMLにjsonで返して表示させるという方法を使用するべきなのかと考えています。 ですが、ajaxという方法を使用したことが無いため、この方法が正しいのか、他に良い方法があるのではないかと不安になり質問させて頂きました。 もし何か良い方法をご存知の方がいらっしゃいましたら、ご教授お願いいたします。 また、質問に不備な点などあるかもしれませんので、その際はご指摘下さい。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する