레이어 내에서 onmouseover, onmouseout

<div style="width:100px;height:100px;background-color:#FF0000" onmouseover="alert('in')" onmouseout="alert('out')">
테스트 레이어
</div>

이렇게 하면.. 당연히 레이어 안쪽으로 들어갈때 alert 이 " in " 이라고 메시지를 띄운다.
반대로 바깥쪽으로 나갈때는 alert 이 "out" 이라고 메시지를 띄운다..

당연한걸 왜 이렇게 설명을 하냐고요?


그럼 다음과 같이 해보자.
<div style="width:100px;height:100px;background-color:#FF0000" onmouseover="alert('in')" onmouseout="alert('out')">
<a href="#">테스트 레이어</a>
</div>

테스트 레이어에 마우스가 올라가면 alert 이 " in " 을 띄우기도 했다가 " out "을 띄우기도 한다..

table에서도 마찬가지이다.

즉, <a href="#">에 올려지가 바로전에 div에서 out으로 잠깐 빠져나간다고 생각하면 된다.

그리고 여기에다가 div 안에 있는 텍스트들을 롤링시킨다고 생각해보자.
소스가 길어져서 생략한다.
롤링이 될때 마우스 오버스에 멈추고, 마우스 아웃시에 다시 움직이도록 하자..
window.setTimeout 이나, window.setInterval 을 이용하게 될것이다.

그런데 div 안에는 앵커태그가 분명이 있을 것이다.. 이럴경우 제일 처음 예를 든것에서 보다시피, 앵커태그를 오갈때 마다 깜빡깜빡 거리게 되는 것이다.


이럴경우는 어떻게 해결할까? ??

방법은
window.setInterval 을 이용하여, 그냥 계속 루프를 돌린다.
다만, 레이어 위에 마우스가 있으면 롤링을 하지 않고, 마우스가 없으면 롤링을 하는 형태로 하면 해결이 된다.

즉,
<script>

var mouseStatus = false;
function initLoad() {

  objLayer = document.getElementById("layer");
  objLayer.onmouseover = function () {mouseStatus=true;} //마우스가 레이어 위에 있으면 true
  objLayer.onmouseout = function () {mouseStatus=false;} //마우스가 레이어 밖에 있으면 false;
  window.setInterval("doPlay()", "5000"); //마우스의 상태와 상관없이 5초마다 doPlay()를 호출 하면서 계속 돈다.
}


function doPlay() {
  if(!mouseStatus) doAction();  //마우스 상태체크해서 false일때만 실행..
}

function doAction() {
  //레이어 롤링하는 배열 문자열로 레이어의 innerHTML을 교체시킨다.}
}

</script>

별거 아닌듯 하지만.. 실제로 정말로 이용할때는 머리 아픕니다.
간단한예로 네이버, 다음 뉴스 부분이 이것을 이용하고 있습니다