JavaScript mouse event 컨트롤
<html>
<head>
<title>메뉴</title>
<style type="text/css">
#menu div
{
font-size:20px;
font-family:돋움;
font-weight:bold;
border:5px solid green;
margin-bottom:1px;
padding:5px;
background-color:White;
width:190px;
}
#sub1, #sub2, #sub3
{
font-size:17px;
font-family:돋움;
font-weight:bold;
border:3px solid pink;
padding:5px;
width:190px;
background-color:White;
position:absolute;
display:none;
}
#sub1
{
left:217px;
top:8px;
}
#sub2
{
left:217px;
top:52px;
}
#sub3
{
left:217px;
top:96px;
}
</style>
<script type="text/javascript">
function Init()
{
for(i=1; i<=3; i++)
{
var menu = document.getElementById("menu" + i);
menu.setAttribute("no", i);
//i값을 그냥 받을수 없다. 다시 이벤트가 호출되는 순간엔 i값이 죽어버렸기 때문이다.
//BOM에서 안되는 것중 하나 그래서 DOM 으로 접근하여 i값을 가져온다.
menu.onmouseover = function ()
{
document.getElementById("sub" + event.srcElement.getAttribute("no")).style.display = "block";
};
menu.onmouseout = function ()
{
document.getElementById("sub" + event.srcElement.getAttribute("no")).style.display = "none";
};
//서브메뉴에 진입했을때
document.getElementById("sub" + i).onmouseover = function ()
{
event.srcElement.style.display = "block";
};
document.getElementById("sub" + i).onmouseout = function ()
{
event.srcElement.style.display = "none";
};
}
// var menu = document.getElementById("menu2");
// menu.onmouseover = function ()
// {
// document.getElementById("sub2").style.display = "block";
// };
// menu.onmouseout = function ()
// {
// document.getElementById("sub2").style.display = "none";
// };
// var menu = document.getElementById("menu3");
// menu.onmouseover = function ()
// {
// document.getElementById("sub3").style.display = "block";
// };
// menu.onmouseout = function ()
// {
// document.getElementById("sub3").style.display = "none";
// };
}
</script>
</head>
<body onload="Init();">
<div id="menu">
<div id="menu1">가전제품/생활용품</div>
<div id="menu2">운동용품/건강제품</div>
<div id="menu3">유아용품/아동용품</div>
</div>
<div id="sub1">
TV / 냉장고<br />
세탁기 / 청소기<br />
전자렌지 /오븐<br />
오디오 / 비디오
</div>
<div id="sub2">
조깅 / 마라톤<br />
야구 / 배구 / 축구<br />
비타민 / 건강보조식품<br />
</div>
<div id="sub3">
유아용품 1단계<br />
유아용품 2단계<br />
유아용품 3단계<br />
유아용품 4단계
</div>
</body>
</html>
