人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

http://www.coudal.com/

上記のウェブサイトを開いてもらうと、右上に「About This Site」というリンクがあります。

これをクリックすると、画面遷移することなく、左側にテキストが表示されます。シンプルで便利です。

これはどうやっているのでしょう?

1157101994
●拡大する

●質問者: notjust
●カテゴリ:インターネット ウェブ制作
✍キーワード:ウェブサイト クリック シンプル テキスト リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● fonya3
●35ポイント
<a target="_self" href="JavaScript:showDiv('eyepop');" onMouseOver="window.status='Open Popup';return true;" onMouseOut="window.status='';return true;">
 About This Site</a>

で、クリックすると、

showDiv('eyepop')

が、呼ばれます。この関数は、

<script language="JavaScript" type="text/javascript" src="jscripts/showhide.js"></script>

に、あります。

<!--

ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
dom = (document.getElementById)? true:false;

function showDiv(id) {
 if (ns4) document.layers[id].visibility = "show"
 else if (ie4) document.all[id].style.visibility = "visible"
 else if (dom) document.getElementById(id).style.visibility = "visible"
}

function hideDiv(id) {
 if (ns4) document.layers[id].visibility = "hide"
 else if (ie4) document.all[id].style.visibility = "hidden"
 else if (dom) document.getElementById(id).style.visibility = "hidden"
}


// -->

これで、

<div id="eyepop">

の、部分を表示をvisibleに変更しています。

http://www.coudal.com/jscripts/showhide.js

◎質問者からの返答

なるほど、JavascriptとCSSなんですね。

ありがとうございます。


2 ● KirakiraHikaru
●35ポイント

JavaScriptを使用しています。

領域のスタイルのvisibilityプロパティを変更して、

見えない状態から見える状態に変化させています。

http://msugai.fc2web.com/web/CSS/visual.html


このページの場合、

showhide.jsというJavaScriptを記述した外部ファイルを呼び出しています。

「About This Site」の「href="javascript:showDiv('eyepop');"」

でshowhide.js内のshowDiv関数を呼び出しています。

showDiv関数では

document.getElementById(id).style.visibility = "visible"

という処理で、指定された領域の表示をvisible=可視化しています。

クリックして表示された部分div id="eyepop"のvisibleはCSSで

#eyepop { visibility: hidden; }

として、最初は非表示に設定されています。

http://www.tohoho-web.com/js/write.htm

◎質問者からの返答

なるほどー。

画面遷移しないとわかりやすくていいですよね。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ