<script>
//메인 베스트오브베스트
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";
}
}
}
</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>&nbsp;</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(1);</script>


탭에 마우스를 올리면 내용이 나타나게 하는 소스인데요
아주 잘 돌아가고 있습니다.. 그런데 추가를 좀 하고싶은데요..

마우스 올리지 않아도 자동으로 넘어가게 하려면 script 소스를 어떻게 수정해야하나요..