マウスカーソルを乗せたり離したりしたときに文字を非表示にしたり表示させたりする方法

●スクリプト

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

function yamato(tgt){

if(document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="none";

}

}

function kenichiro(tgt){

if(document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="";

}

}

//--></script>

●HTML

<p onMouseover="yamato('tokyo')" onMouseout="kenichiro('tokyo')">この文字にマウスカーソルを乗せると、下記の文字が消えます。マウスカーソルを離すと文字が復活します。</p>

<p id="tokyo">東京</p>

関数 yamato は、style.display="none" を設定することで、対象を非表示にする処理である。

関数 kenichiro は、style.display="" （何も指定しないこと）で、対象を表示（デフォルト）する処理である。

onMouseover　は、マウスカーソルが乗せられたイベントを拾う。

onMouseout　は、マウスカーソルが離れたイベントを拾う。

それぞれ、非表示、表示　の関数をコールすることで、東京という文字を非表示にしたり、再表示させたりしている。

サンプルソース

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

東京ウェブ制作