개발

배너 스크립트

에드몽단테스 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>

반응형