AJAXのお勉強

Divタグを表示・非表示(JavaScript)＠AJAX

JavaScriptでDivタグに対して表示・非表示を行います。

下記では、マウスフォーカス・アウト時に、
Divタグを表示・非表示しています。

表示 ：style.display = 'block'
非表示：style.display = 'none'

マウスフォーカスのイベントは、onmouseover
アウトのイベントは、onmouseout

メニューなどで、フォーカス時に子メニューを表示するなどありますね。


<html>
<head>
<title>JavaScript マウスフォーカスで表示・非表示</title>
<script type="text/javascript">
<!--

//マウスフォーカス
function mouseon() {
    document.getElementById("popDiv").style.display = 'block';
}

//マウスフォーカスアウト
function mouseoff() {
    document.getElementById("popDiv").style.display = 'none';
}

// -->
</script>
</head>

<body onload="javascript:mouseoff()">

<a href="#" onmouseover="javascript:mouseon()" onmouseout="javascript:mouseoff()">マウス</a>

<div id="popDiv" style="border-color:#333333;border-width:1px;border-style:solid;width:200px">
マウスフォーカスで表示<BR>
マウスアウトで非表示
</div>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.