Web/Javascript

자동 전환 및 선택 전환(change)

aucd29 2013. 9. 26. 21:27
<!--------------------------------------------------------------------
+
+        date            : 2004-06-04
+        copyright        : aucd29
+        e-mail            : aucd29@daum.net
+        
+        Auto Change Image & Clicked Change
+        Sample URL : http://www.hanvitgosi.co.kr
+
+ ------------------------------------------------------------------>
<html>
<head>
<title></title>
<meta name='author' content='interkorea'>
<meta name='keywords' content=''>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='content-type' content='text/html; charset=euc-kr'>
<script language='javascript'>
<!--
    //
    // id write;
    //
    var id            = 'teacher';
    var delay_time = 1;            // sec
        
    
    var n    = 0;
    function rndTeacher()
    {
        setTimeout("TeacherChange()",delay_time*1000);
    }

    function TeacherChange(now)
    {
        max = document.all(id).length;
        document.all(id)[n].style.display='none';
        
        ++n;
        n=n==max?0:n;

        document.all(id)[n].style.display='block';
        
        if(!now)rndTeacher();        
    }
    
    window.onload = rndTeacher;
//-->
</script>
</head>
<body>
<a href="javascript:;" onClick='TeacherChange(1)' onFocus='this.blur()'>[CHANGE]</a>

<br>

    <table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr id=teacher>
        <td width="110">가</td>
        <td width="110">나</td>
        <td width="110">다</td>
        <td width="110">라</td>
    </tr>
    <tr id=teacher style='display:none'>
        <td width="110">마</td>
        <td width="110">마</td>
        <td width="110">사</td>
        <td width="110">아</td>
    </tr>
    <tr id=teacher style='display:none'>
        <td width="110">자</td>
        <td width="110">차</td>
        <td width="110">1</td>
        <td width="110">2</td>
    </tr>
    <tr id=teacher style='display:none'>
        <td width="110">3</td>
        <td width="110">4</td>
        <td width="110">5</td>
        <td width="110">6</td>
    </tr>
    </table>


</body>
</html>