オンマウスで説明文を表示

ヘッダーエリアに

<script language="javascript">
<!--
function xShow(str,exp){
document.getElementById("caption").innerHTML="<img src='"+str+"'>";
document.getElementById("label").innerHTML=exp;
}
function xHide(){
document.getElementById("caption").innerHTML=document.getElementById("label").innerHTML=" ";
}
//-->
</script>

ボディ部分に

<ul>
<li class="menu01" onmouseover="xShow('cap1.jpg','説明文')" onmouseout="xHide()"><a href="#">メニュー1</a></li>
<li class="menu02" onmouseover="xShow('cap2.jpg','説明文')" onmouseout="xHide()"><a href="#">メニュー2</a></li>
</ul>

表示させたい部分

<div id="caption"> </div>
<div id="label"> </div>

CSSも反映させられるから便利そう。