자동으로 이동하는 탭과 컨텐츠 (2012-11-15 수정) > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

자동으로 이동하는 탭과 컨텐츠 (2012-11-15 수정) 정보

자동으로 이동하는 탭과 컨텐츠 (2012-11-15 수정)

본문

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

<!--
실제팝업존 시작 --><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;
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><!--
실제팝업존 끝-->
추천
0
  • 복사

댓글 3개

팝업존 내용이 잘못된것이 있어서 다시 올렸습니다.
앞서 내용을 테스트 하신분들께 사과드립니다.  소스를 정리해서 올리다가 실수가 있었네요..  ㅠㅠ
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";

를 아래와 같이 변경하였습니다.

    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";
© SIRSOFT
현재 페이지 제일 처음으로