マウスカーソルを「乗せる」「乗せない」と「表示」「非表示」の処理例

●スクリプト

<script type="text/javascript"><!--

function syori1(tgt){

if (document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="";

}

}

function syori2(tgt){

if (document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="none";

}

}

function syori3(tgt){// サブメニューからポインタが離れた時の処理

if (document.getElementById){

setTimeout('document.getElementById("' + tgt + '").style.display="none"',500); // 0.5秒後に隠す

}

}

function syori4(tgt){// サブメニューからポインタが離れた時の処理

if (document.getElementById){

setTimeout('document.getElementById("' + tgt + '").style.display=""',500); // 0.5秒後に表示させる

}

}

//--></script>

●HTML

<span onMouseover="syori1('tokyo')">処理１</span>　

<span onMouseover="syori2('tokyo')">処理２</span>　

<span onMouseover="syori3('tokyo')">処理３</span>

<span onMouseover="syori4('tokyo')">処理４</span>

<h1 id="tokyo" style="display: none;">東京</h1>

●解説

まず、初期状態では、東京の文字は表示されていない。

処理１　にマウスカーソルを乗せると、東京の文字が表示される。

その状態で、処理２　にマウスカーソルを乗せると、東京の文字が消える。

処理３も、東京の表示を消す処理だが、0.5秒後に消す、というように遅らせている。

処理１で表示させた状態から、処理２と処理３で、消え方を比較してみるとよい。

処理２はマウスカーソルを乗せた瞬間に消えるが、処理３は0.5秒後に消える。

なお、処理４は、0.5秒後に表示させる処理である。

以上のように、文字列の表示・非表示は、setTimeout を使っても実現できる。

サンプルソース

http://tokyo-webs.jp/sample_source/130326d/

東京ウェブ制作