トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

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

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

◆ 実行サンプル


単純な文字の表示
メニューの表示
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、文字列を記述したレイアウト枠(レイヤー)を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;」を指定しています。

処理が2つあることから、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>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom