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

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

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

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

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

◆ 実行サンプル

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

【　解　　　　説　】

まず、文字列を記述したレイアウト枠（レイヤー）を用意します。
レイアウト枠（レイヤー）の名前は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.スタイル属性」を参照してください。