■ オンマウスで複数のレイアウト枠（レイヤー）を表示/非表示する

「DHTMLサンプル」で、レイアウト枠（レイヤー）の表示非表示を説明いたしました。
今回は、複数のレイアウト枠（レイヤー）を「表示/非表示」する方法を解説します。
複数のレイアウト枠（レイヤー）だからといって特に変わったところはありませんが、名前の付け方や呼び出しに注意が必要なだけです。
また、同じような処理をJavascriptに任せてしまうだけです。
このサンプルを理解するためには、「DHTMLサンプル」−「オンマウスでレイアウト枠（レイヤー）を表示/非表示する」
や「Javascriptサンプル」−「オンマウスで画像の変更３」などを参考にして下さい。

◆ 実行サンプル

【　解　　　　説　】

まず、文字列を記述したレイアウト枠（レイヤー）を2つ用意します。
このサインプルは次のように記述しています。

<div id="div1" style="position:absolute; top:200px; left:20px; width:80px; z-index:1;background-color: #ffccff;visibility:hidden;">テストサンプルの表示</div>
<div id="div2" style="position:absolute; top:260px; left:20px; width:180px; z-index:1;background-color: #ffccff;visibility:hidden;">
<a href="/">トップページへジャンプ</a><br>
<a href="../smphtm/color.html">カラーサンプルへジャンプ</a><br>
<a href="/images/exp/baloon.gif">画像を表示</a><br>
</div>

レイアウト枠（レイヤー）の名前はname属性を使わず、id属性を使用します。
このサンプルではそれぞれ「id="div1"」と「id="div2"」としました。
また、最初は非表示にしたいためスタイル属性で「visibility: hidden;」を指定しています。

処理が２つあることから、Javascriptで共通に使用できるサブルーチンを作成します。
そのサブルーチンは、変更したいdivタグの名前と設定したい状態を送れば、自動的にその処理を行ってくれるようにします。

そのサブルーチンの名前を「menu_dsp()」とした場合、呼び出しは次のようになります。 menu_dsp('（divタグの名前）','（セットする状態）');

マウスが乗った時は「DHTMLサンプル」で説明した「onmouseover=""」を、マウスが離れた時は「onmouseout=""」を使用して指定します。 記述は次のようになります。 <span onmouseover="menu_dsp('div1','');" onmouseout="menu_dsp('div1','hidden');">単純な文字の表示</span>
<span onmouseover="menu_dsp('div2','');" onmouseout="menu_dsp('div2','hidden');">メニューの表示</span>

それを受けるサブルーチンでは次のようにそれぞれのパラメータを受け、次のように記述し、 function menu_dsp(divnam,flg0) { }

それらを使って、次のような処理でスタイル属性を変更します。 document.getElementById(divnam).style.visibility = flg0;

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「divhidej.js」というファイル名で保存します。

function menu_dsp(divnam,flg0){ document.getElementById(divnam).style.visibility = flg0; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="divhidej.js"></script>

次に、テキストを記述した次のようなレイアウト枠（レイヤー）を「body」タグの直後ぐらいに 記述します。
<div id="div1" style="position:absolute; top:200px; left:20px; width:80px; z-index:1;background-color: #ffccff;visibility:hidden;">テストサンプルの表示</div>
<div id="div2" style="position:absolute; top:260px; left:20px; width:180px; z-index:1;background-color: #ffccff;visibility:hidden;"> <a href="/">トップページへジャンプ</a><br>
<a href="../smphtm/color.html">カラーサンプルへジャンプ</a><br>
<a href="/images/exp/baloon.gif">画像を表示</a><br>
</div>

そして、レイアウト枠（レイヤー）を「表示/非表示」するための文字列を次のように記述します。 <strong><span onmouseover="menu_dsp('div1','visible');" onmouseout="menu_dsp('div1','hidden');">単純な文字の表示</span></strong><br>
<strong><span onmouseover="menu_dsp('div2','visible');" onmouseout="menu_dsp('div2','hidden');">メニューの表示</span></strong><br>