宜しくお願いします。
JavaScriptはほとんど初心者です。
タイトルがかなりわかりずらいと思いますが…
こちらのサイトで使われているJavaScriptについての質問です。
http://miel-osaka-wedding.jp/bridalfair/bridalfa …
こちらのブライダルフェアの表示方法は、
左側の日にちをクリックしたら、右側に表示される情報が切り替わる、という表示方法です。
HTMLデータ上では、現在表示されている情報の他にもズラっと表示されています。それが、日にちをクリックすることにより、定位置にそれぞれの情報が表示されるようになっています。
それぞれの情報は、テーブルで区切られています。
そこで、ページをDLしてソースを見て研究したのですが、どうしても分からない箇所があります。
それは、フェア情報の右に配置されている4つのアイコン(マウスオーバーで画像が変わるものです)を削除すると、このJavaScriptが機能しなくなってしまいます。
ページを見ているうちに、「マウスオーバーで切り替わる画像」がJavaScripに影響しているように思ったのですが、
どう連動しているのか、なぜ機能しなくなるのかが分かりません。
(HTMLファイルとは別に、「js」という拡張子のファイルもありました。)
もし、分かる方がいらっしゃいましたら教えていただけませんか?
もしくは、これと同じ表示方法について説明をされているサイトなどありましたら教えて頂けると嬉しいです。
ちなみに、使用しているソフトはDreamWeaverMXです。
至らない点があるかとはおもいますが、どうぞ宜しくお願いします。
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>でソース内に定義されています。
ご質問の「右の画像リンクを削除すると機能しなくなる」は、ソース上からは見受けられません。ごく普通のリンクです。
仮にリンクを削除したとして、動作しなくなると考えられるケースとしては、
1.テーブルのタグの対応が壊れている。(文法エラー)
2.<div></div>の対応が壊れている。(文法エラー)
3.必要なJavaScript functionが定義されていない。
が、咄嗟に考えつく原因です。
確認手順として、
1.ソースをDLする。
2.http://miel-osaka-wedding.jp/browser2.jsをDLする。
3.ソースのヘッダの<script language="JavaScript" src="../browser2.js"></script>を自身の環境に合わせて修正する。
これで正常に動作したら、
4.不要なリンクを削除する。
で大丈夫だと思います。ただ、このサイトのソースを参考にする場合、インデントが若干ずれていますので、一度ソース全体を綺麗にする方が、修正する際には安全かと。
ご回答ありがとうございます。
右部分の画像ですが、DreamWeaver上でテーブルごと指示して一気に削除すると機能しなくなっていたのですが、タグで画像とテーブルを一つ一つ削除すると何故かちゃんと機能しました。。
なんとか、無事動きそうです!
ずっとDreamWeaverに頼りっぱなしだったのでタグも勉強しなくてはな…と思いました。
本当に丁寧にありがとうございました!そしてお騒がせしました。
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>
わざわざソースを書いて下さってありがとうございます。
これから研究しようと思います^^
JavaScriptを別ファイルにして呼び出すよりも、HTMLに埋め込む方が楽そうですね~。
JavaScript、いろいろできて奥が深いですね…。
どうもありがとうございました!
No.1
- 回答日時:
HTMLソースを見ましたが、おそらくスタイルのdisplay要素を使って隠してるだけだと思います。
折りたたみメニューでよく使われる手法です。
DreamWeaverは使ったことがないので分かりません。すいません。
同じようなサンプルは探すことができませんでした。本当にすいません。
いえいえ、ご回答ありがとうございます^^
折りたたみメニューですか~。
使おうとして、少しいじってみたことがあるのでそちらの方向でも考えてみます!
メルパルクさんの見せ方は、まさに「これだ!!」という方法だったので見つけた時は嬉しかったのですが
実際見てみたら私には難しかったです。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
クリックすると下に説明文が出...
-
フラッシュの様に
-
JavaScriptにて『var val2 = "d...
-
Dragdealer JSの二つ以上の設置
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
ダブルクォーテーションが消え...
-
style.visibility="hidden";
-
タブで開いてさらにタブ内をア...
-
createElementで作成した要素を...
-
動的にHTMLコンテンツを吹き出...
-
console.log結果をhtmlで表示し...
-
javascriptテキストBOX色を元に...
-
removeAttribute()メソッドで削...
-
iframe内からjQueryで指定したい
-
【jQuery】2分割レイアウトで、...
-
jQueryで電卓を作っているのですが
-
javascriptを使って画像を切り...
-
jQueryスライドショー画像への...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き function mov...
-
前回の質問の続き function mou...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
javascriptでオブジェクトの重...
-
タブで開いてさらにタブ内をア...
-
jQueryで特定id以外の下にある...
-
指定したパスが現URLに含まれて...
-
折りたたみ部分にアンカーでリ...
-
前回の質問の続き
-
jQueryのアコーディオンメニュ...
おすすめ情報