정상적으로 작동 하는 소스인데..
탭메뉴에 마우스 올리고 가만히 놔두면 메인이미지들이 미친듯이 돌아갑니다..
어딜 수정해야 하는지 고수님들 도움을 부탁드립니다..

<script>
//메인 베스트오브베스트
var Loadn = 1;
function bob(n) {
for(var i = 1; i < 5; i++) {
obj = document.getElementById('bob'+i);
img = document.getElementById('bob_button'+i);
if ( n == i ) {
obj.style.display = "block";
img.src = "/images/main/bob0"+i+"_on.gif";
} else {
obj.style.display = "none";
img.src = "/images/main/bob0"+i+"_off.gif";
}
}
Loadn++;
if(Loadn ==5){
Loadn =1;
}
setTimeout("bob("+Loadn+")",1000); //1000 = 1초
}
</script>
<!-- 베스트오브 베스트 시작 -->
<table width="990" border="0" cellspacing="0" cellpadding="0" style="border-bottom: 2px solid #757575;">
<tr>
<td width="200"><img src="/images/main/title_md.gif" alt="" /></td>
<td width="790" align="right" valign="bottom"><span style="cursor: pointer;">
<div id='bob_button1' onclick='bob(1);' onmouseover='bob(1);'>첫번째</div>
<div id='bob_button2' onclick='bob(2);' onmouseover='bob(2);'>2번째</div>
<div id='bob_button3' onclick='bob(3);' onmouseover='bob(3);'>3번째</div>
<div id='bob_button4' onclick='bob(4);' onmouseover='bob(4);'>4번째</div>
</span></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>

<table width="990" border="0" align="center" cellpadding="0" cellspacing="0" id='bob1' style='display:block;' >
<tr>
<td>내용1</td>
</tr>
</table>

<table width="990" border="0" align="center" cellpadding="0" cellspacing="0" id='bob2' style='display:block;' >
<tr>
<td>내용2</td>
</tr>
</table>

<table width="990" border="0" align="center" cellpadding="0" cellspacing="0" id='bob3' style='display:block;' >
<tr>
<td>내용3</td>
</tr>
</table>

<table width="990" border="0" align="center" cellpadding="0" cellspacing="0" id='bob4' style='display:block;' >
<tr>
<td>내용4</td>
</tr>
</table>
<script>bob(Loadn);</script>




아래와 같은 답변을 받았는데요...


마우스가 올라가면 멈추는 루틴이 없네요? settimeout구문은 bob 함수부분에서 빼서 돌리거나 함수 전체를 개선 하셔야 할듯 합니다. 해당 함수가 계속 돌아가면서 클릭이나 마우스 오버등으로 bob 구문을 불러오게 되면 계속 새로운 bob이 중첩으로 돌아가는것 같네요....


jquery 잘 아시는 분 계시면 조금만 도움을 부탁드립니다..