2/3 ドロップダウンメニューの表示・非表示 [ホームページ作成] All About

スクリプトで表示・非表示を切り替える

それでは、マウスの動きにあわせて表示・非表示を切り替えるスクリプトを書いてみましょう。

サンプルは次の通りです。各リンクの上にマウスカーソルを乗せてみて下さい。マウスが乗ったときだけ、各リンクの横に、赤色の文字が表示されるはずです。
※JavaScriptが無効だと何も起きません。

	プロフィールへGO！
	イラストへGO！
	日記へGO！
	リンクへGO！

これらを実現する方法を以下で順にご説明していきます。

解説：JavaScript部分

◆JavaScriptソース

まず、JavaScriptで、表示・非表示を切り替えるスクリプトを記述します。ソースは次のようになります。
※このソースは、HTMLのhead要素内（<head>～</head>）に書いておきます。

<script type="text/javascript">
function show(eid) {
   document.getElementById(eid).style.visibility = 'visible';
}
function hide(eid) {
   document.getElementById(eid).style.visibility = 'hidden';
}
</script>

上記のソースの意味を簡単に説明します。

●まず、<script type="text/javascript">～</script>で、その範囲がJavaScriptのソースであることを示しています。

●次に、function ... で関数を定義します。ここでは、show関数とhide関数の2つを定義しています。 showは「表示させる」ための関数、hideは「隠す」ための関数です。

●どちらの関数にも、document.getElementById(eid).style.visibility という記述があります。これは、『ID名「eid」が示す要素のスタイルのvisibilityプロパティの値』を示しています。 show関数では、これに 'visible' を代入することで「表示する」状態に変更し、 hide関数では、'hidden' を代入することで「表示しない」状態に変更しています。

●表示・非表示を切り替える対象の要素は、show関数・hide関数の中には記述せず、引数（eid）で受け取るように作っています。これによって、1つの関数で複数の要素を対象に表示・非表示の切り替えが可能になります。

この2つの関数を、HTMLソース側から適切に呼び出すようにすることで、「表示したり消えたり」する動作が実現できるわけです。

解説：HTML部分

◆HTMLソース

<div><a href="～" onmouseover="show('menu1');" onmouseout="hide('menu1');">プロフィール</a><span id="menu1" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu2');" onmouseout="hide('menu2');">イラスト</a><span id="menu2" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu3');" onmouseout="hide('menu3');">日記</a><span id="menu3" style="visibility: hidden;">へGO！</span></div>
<div><a href="～" onmouseover="show('menu4');" onmouseout="hide('menu4');">リンク</a><span id="menu4" style="visibility: hidden;">へGO！</span></div>

上記のHTMLソースについて簡単に説明します。

●<span id="xxx" style="visibility: hidden;">

見えたり消えたりする部分（「へGO！」の部分）は、span要素（<span>～</span>）内に記述しています。このspan要素には、id属性（★）とstyle属性（★）を加えています。

★id属性には、他と重複しない任意の文字列（ここでは、menu1・menu2…）を指定します。JavaScriptからは、このIDを使って制御することになりますので、このid属性は必須です。
★style属性では、visibilityプロパティに hidden をセットして「非表示」にしてあります。これは、最初にページが読み込まれた時点では見えないようにするためです。

●<a ... onmouseover="..." onmouseout="..." ...>

マウスの動きに合わせてスクリプトを呼び出す部分は、リンクを作るa要素（<a href="...">～</a>）に記述します。
a要素に、マウスの動きにあわせてスクリプトを呼び出す記述（具体的には次の2つ）を加えます。

★onmouseover="show('対象ID名');"

★onmouseout="hide('対象ID名');"

★「 onmouseover= 」（ On Mouse Over ）で指定した内容が、マウスが乗ったときに実行され、 ★「 onmouseout= 」（ On Mouse Out ）で指定した内容が、マウスがはずれたときに実行されます。

ここでは、前者にshow関数を・後者にhide関数を記述していますから、「マウスが乗ったら show関数が」・「マウスが外れたら hide関数が」それぞれ実行されることになります。

show関数・hide関数とも、呼び出す際に「 show('menu1') 」のような感じで、引数を与えています。この「menu1」というのが、表示・非表示を切り替える対象となる要素のIDです。引数としてIDを渡すことで、JavaScript側ではそのIDに対して操作が行われるようになっています。

このようにして、「見えたり消えたり」という動作が実現できるわけです。