ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 배너 스크립트
    개발 2011. 4. 8. 14:25
    <script type="text/javascript">
    var bPOut = '', bIndex = 0, bPSpeed = 5000;
    var bPList = new Array();

    bPList.push(['popup0330.jpg', '/not_0102000000.jsp?type=view&b_idx=12466', '', '부설연구소장초빙']);
    bPList.push(['sosicpopup.jpg', '/web/web_0104000000.jsp', '', '소식지 신청']);
    bPList.push(['popup0324.jpg', ' /kem_home/info/news/notice/kem_view.asp?q=16528', '_blank', '에너지절약 아이디어 공모전']);
    bPList.push(['popup1115.jpg', ' /not/not_0102000000.jsp?type=view&b_idx=12258', '', '상용화 현장연구 지원 안내']);

    /**
     * 선택한 배너 표시
     */
    function selectBannerPopup(index){
        var banner = document.getElementById('pBanner');
        banner.src = '/images/'+bPList[index][0];
        banner.alt = bPList[index][3];
        banner.parentNode.setAttribute('href', bPList[index][1]);
        if(bPList[index][2] != ''){
            banner.parentNode.setAttribute('target', bPList[index][2]);
        }
        else{
            banner.parentNode.setAttribute('target', '');
        }

        changeBannerDisplay(index);
        return false;
    }

    /**
     * 배너위치가 (자동으로) 바뀌면 배너 디스플레이의 모양을 바꿔준다.
     * @param index
     * @return
     */
    function changeBannerDisplay(index){
        for(var i=0; i<bPList.length;i++){
            document.getElementById('pbindex'+(i+1)).src = '/images/'+(i+1)+'_off.gif';
        }
        document.getElementById('pbindex'+(index+1)).src = '/images/'+(index+1)+'_on.gif';
    }

    /**
     * 일정시간 후에 팝업배너의 이미지를 변경시킨다.
     */
    function intervalBPopup(){
        selectBannerPopup(bIndex++);
        if(bIndex == bPList.length)
            bIndex = 0;
        bPOut = setTimeout("intervalBPopup()",bPSpeed);
    }

    /**
     * 배너 위치로 이동할 수 있는 영역을 디스플레이
     * @return
     */
    function makePopupBannerIndex(){
        var src = '';
        for(var i=0; i<bPList.length;i++){
            if(i == 0){
                src += '<a href="#" onclick="return selectBannerPopup('+i+');"><img src="/images/1_on.gif" alt="1" id="pbindex'+(i+1)+'" /></a>&nbsp;';
            }
            else{
                src += '<a href="#" onclick="return selectBannerPopup('+i+');"><img src="/images/'+(i+1)+'_off.gif" alt="'+(i+1)+'" id="pbindex'+(i+1)+'" /></a>&nbsp;';
            }
        }
        var area = document.getElementById('popup_banner_display_area');
       
        area.innerHTML = src;
    }
    </script>


    <div style="position:relative;">
        <div style="position:absolute;height:20px;top:3px;right:5px;" id="popup_banner_display_area"></div>
        <a href="#popup"><img id="pBanner" src="/images/main_img/popup0330.jpg" style="padding-left:3px;" alt="부설연구소장초빙" /></a>
    </div>

    <script type="text/javascript">
    // 팝업배너 시작
    makePopupBannerIndex();
    bPOut = setTimeout("intervalBPopup()", 0);
    </script>

    반응형

    댓글

Designed by Tistory.