※同様の処理が「Javascriptサンプル」にもある場合があります。
そちらの方もご参照下さい。

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

CSSサンプル」や「DHTMLサンプル」で、レイアウト枠(レイヤー)を説明いたしました。

レイアウト枠(レイヤー)を「表示/非表示」するにはスタイル属性「visibility」を使用します。
詳しくは、「HTMLの解説」−「14.スタイル属性」をご参照下さい。

また、「CSSサンプル(カスケーディングスタイルシート)」−「画像を好きな位置に表示する(レイアウト枠(レイヤー))」や「文字を好きな位置に表示する(レイアウト枠(レイヤー))」、「画像の重ね合わせ」、
DHTMLサンプル」−「オンマウスで画像の表示非表示1」、「オンマウスで画像の表示非表示2」 なども参考にして下さい。

今回のサンプルは、リンクボタンにマウスが乗るとレイアウト枠(レイヤー)を表示し、マウスが離れると非表示にします。

◆ 実行サンプル

ここにマウスを乗せてください。

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【 解    説 】

まず、文字列を記述したレイアウト枠(レイヤー)を用意します。
レイアウト枠(レイヤー)の名前はname属性ではなくid属性で指定します。
このサンプルでは「id="div1"」としました。

表示非表示の切り替えにはスタイル属性の「visibility」を使い、表示したいときは「visible」、非表示には「hidden」を指定します。
また、最初は非表示にしておくため「visibility: hidden;」を指定しておきます。

このサンプルでは次のように記述しています。

<div id="div1" style="position:absolute; top:360px; left:200px; width:80px; height:40px; background-color: #ffccff;visibility: hidden;">
テストサンプルの表示
</div>

マウスが乗った時はレイアウト枠(レイヤー)を表示したいのですから、次のようにスタイル属性「visibility」「visible」をセットします。
document.getElementById('div1').style.visibility='visible';

マウスが離れた時はレイアウト枠(レイヤー)を非表示にしたいのですから、次のようにスタイル属性「visibility」「hidden」を指定します。
document.getElementById('div1').style.visibility='hidden';

「表示/非表示」を切り替える文字は、今回、「span」タグで配置し、マウスが乗った時は「「DHTMLサンプル」で説明した「onmouseover=""」を、マウスが離れた時は「onmouseout=""」を使用して指定します。
したがって、ここのサンプルは次のように記述しています。
<span onmouseover="document.getElementById('div1').style.visibility='visible';" onmouseout="document.getElementById('div1').style.visibility='hidden';">
ここにマウスを乗せてください。
</span>

【記述サンプル】
まず、テキストを記述した次のようなレイアウト枠(レイヤー)「body」タグの直後ぐらいに 記述します。
<div id="div1" style="position:absolute; top:360px; left:200px; width:80px; height:40px; background-color: #ffccff;visibility: hidden;">テストサンプルの表示</div>
次にレイアウト枠(レイヤー)「表示/非表示」するための文字列を次のように記述します。
<span onmouseover="document.getElementById('div1').style.visibility='visible';" onmouseout="document.getElementById('div1').style.visibility='hidden';">ここにマウスを乗せてください。</span>
スタイルシートスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

page update:2010/01/23 20:32

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