자동으로 이동하는 탭과 컨텐츠 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

자동으로 이동하는 테이블 tab과 표만들기

<!--
실제팝업존 시작 --><table width="265" border="0" cellspacing="0" cellpadding="0" id="TABS_BUTTON">
  <tr>
    <td align="right" style="padding:12px 3px 2px 0; background-image:url(popup/img/pop_title.gif); background-repeat:no-repeat; background-position:bottom left;"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td style="padding-left:4px;"><img src="popup/img/pop_num01on.gif" onMouseOver="changeTabItem(0)" selected="popup/img/pop_num01on.gif" unselected="popup/img/pop_num01off.gif" style="cursor:pointer;filter:blendTrans(duration=0.7);" alt="" border="0" /></td>
        <td style="padding-left:4px;"><img src="popup/img/pop_num02on.gif" onMouseOver="changeTabItem(1)" selected="popup/img/pop_num02on.gif" unselected="popup/img/pop_num02off.gif" style="cursor:pointer;filter:blendTrans(duration=0.7);" alt="" border="0" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0" id="TABS_TBL0" style="FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0,wipestyle=0,motion=forward);">
        <tr>
          <td><a href="#" id="bp1" onclick="window.open('popup/2012_1018/popup.html','PopupZone_bp1','width=400, height=430, scrollbars=no, menubar=no'); return false"><img src="popup/2012_1018/popup_s.jpg" width="265" height="77" border='0' alt='테크플러스 2012' /></a></td>
        </tr>
      </table>
      <table border="0" cellspacing="0" cellpadding="0" id="TABS_TBL1" style="FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0,wipestyle=0,motion=forward);">
        <tr>
          <td><a href="#" id="bp2" onclick="window.open('popup/2012_1008/popup.html','PopupZone_bp2','width=350, height=461, scrollbars=no, menubar=no'); return false"><img src="popup/2012_1008/popup_s.jpg" width="265" height="77" border="0" alt="세라와 믹을 찾아라" /></a></td>
        </tr>
      </table>
<script language="javascript">
<!--
// 2012-09-20 수정 // 탭개수 관련 주석 추가 // 해피정닷컴 정창용
var nTabIndex = 0;
var nTmrTab = null;
var nTabInterval = 5500; // 빠르기속도 지정 (2012-11-14 수정)
function rotateTabDisplay(){
  var No = nTabIndex+1;
  if(No > 1) No = 0;  // N0 > 2 에서 2 는 탭갯수 -1
  changeTabItem(No);
}
function changeTabItem(No){
  if(nTmrTab != null) clearTimeout(nTmrTab);
  nTmrTab = null;
  if(nTabIndex == No) return;
  var Button= document.getElementById('TABS_BUTTON').getElementsByTagName("IMG");
  if(Button[nTabIndex].filters){
    Button[nTabIndex].src = Button[nTabIndex].getAttribute('unselected');
    Button[No].src = Button[No].getAttribute('selected');
    document.getElementById('TABS_TBL' + No).filters[0].Apply();
    document.getElementById('TABS_TBL' + No).style.display = "block";
    document.getElementById('TABS_TBL' + No).filters[0].Play();
    //document.getElementById('TABS_TBL' + nTabIndex).filters[0].stop();
    document.getElementById('TABS_TBL' + nTabIndex).style.display = "none";
  }else{
    Button[nTabIndex].src = '' + Button[nTabIndex].getAttribute('unselected');
    document.getElementById('TABS_TBL' + nTabIndex).style.display = "none";
    Button[No].src = '' + Button[No].getAttribute('selected');
    document.getElementById('TABS_TBL' +No).style.display = "block";
  }
  nTabIndex = No;
  nTmrTab = setTimeout("rotateTabDisplay()", nTabInterval);
}
nTmrTab = setTimeout("rotateTabDisplay()", nTabInterval);
// -->
</script>
<script language="javascript">
<!--
changeTabItem(0);  // 탭1 (탭개수만큼 증가)
changeTabItem(1);  // 탭2
//changeTabItem(2);
rotateTabDisplay();
// -->
</script>
    </td>
  </tr>
</table><!--
실제팝업존 끝-->