이미지 탭 (Change Banner)

조회 수 4441 추천 수 0 2010.01.06 13:17:23

활성화된 탭의 이미지 변경을 CSS가 아닌 스크립트로 처리.

네이버 지식인 메인페이지에서 사용중이죠.


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>보짱넷 :: vozzang.net</title>
<style type="text/css">
* {margin:0; padding:0;}
img {border:none;}
li {list-style:none;}
.recommend, .pro_banner {height:200px; border:5px solid #43a628;}
</style>
</head>
<body>
    <script type='text/javascript'>
    function change_banner(type)
    {
        var banner_recommend = document.getElementById("banner_recommend");
    
        var banner_2 = document.getElementById("banner_2");
        var button2 = document.getElementById("banner_button_2");
        
        var banner_3 = document.getElementById("banner_3");
        var button3 = document.getElementById("banner_button_3");
        var button1 = document.getElementById("banner_button_1");
        if (banner_recommend == null)
        {
            banner_2.style.display = "block";
        }
        else
        {
            if (type == 1)
            {
                banner_recommend.style.display = "block";
                button1.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner1_on.gif";
    
                banner_2.style.display = "none";
                button2.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner2_off.gif";
        
                banner_3.style.display = "none";
                button3.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner3_off.gif";
        
            }
        
            else if (type == 2)
            {
                banner_recommend.style.display = "none";
                button1.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner1_off.gif";
        
                banner_2.style.display = "block";
                button2.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner2_on.gif";
                
                banner_3.style.display = "none";
                button3.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner3_off.gif";
            
            }
        
            else if (type == 3)
            {
                banner_recommend.style.display = "none";
                button1.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner1_off.gif";
        
                banner_2.style.display = "none";
                button2.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner2_off.gif";
            
                banner_3.style.display = "block";
                button3.src = "http://vozzang.net/vzscript/js/change_banner/tab_banner3_on.gif";
                
            }
        
            else
            {
                return;
            }
        }
    }
    </script>



<ul>
<li>
<a href='javascript:change_banner(1);'><img id='banner_button_1' src='http://vozzang.net/vzscript/js/change_banner/tab_banner1_off.gif' width='24' height='20' alt=''></a>
</li>
<li>
        <a href='javascript:change_banner(2);'><img id='banner_button_2' src='http://vozzang.net/vzscript/js/change_banner/tab_banner2_off.gif' width='24' height='20' alt=''></a>
</li>
<li>
        <a href='javascript:change_banner(3);'><img id='banner_button_3' src='http://vozzang.net/vzscript/js/change_banner/tab_banner3_off.gif' width='24' height='20' alt=''></a>
</li>
</ul>

<div id='banner_recommend' class='recommend'>
111111111111111111
</div>

<div class="pro_banner" id="banner_2">
222222222222222222222
</div>
<div class="pro_banner" id="banner_3">
3333333333333333333
</div>

<script type='text/javascript'>change_banner(1);</script>




</body>
</html>


profile

소속 : 밀짚모자 해적단

엮인글 :
http://www.vozzang.net/429/2aa/trackback
문서 첨부 제한 : 0Byte/ 2.00MB
파일 제한 크기 : 2.00MB (허용 확장자 : *.*)
List of Articles
번호 제목 글쓴이 날짜 조회 수sort
16 크로스브라우징 가능한 폼 글자 수 계산 (트위터 처럼) id: 보짱보짱 2010-02-08 4746
15 플로팅 메뉴 (퀵메뉴) id: 보짱보짱 2010-01-06 4680
14 png-hack (IE5.5~6에서 PNG이미지를 투명처리) [1] id: 보짱보짱 2010-02-02 4599
» 이미지 탭 (Change Banner) id: 보짱보짱 2010-01-06 4441
12 전체메뉴 보기 레이어 imagefile id: 보짱보짱 2010-01-06 4218
11 FAQ 자주하는 질문 - 첫번째 항목 노출 버전 id: 보짱보짱 2010-01-06 4080
10 DIV 배경 새로고침할때마다 랜덤으로 바꾸기 id: 보짱보짱 2010-01-06 3954
9 창 닫기 스크립트 정리 id: 보짱보짱 2010-01-06 3810
8 익스플로러, 파이어폭스, 오페라 즐겨찾기 추가 id: 보짱보짱 2010-01-06 3792
7 div나 table 등등을 슬라이드 id: 보짱보짱 2010-01-06 3778
6 쿠키 레이어 팝업 id: 보짱보짱 2010-01-06 3728
5 기본 인쇄(프린트) 스크립트 id: 보짱보짱 2010-01-06 3676
4 초간단 롤오버 이미지 id: 보짱보짱 2010-01-06 3669
3 Lightbox Plus file id: 보짱보짱 2010-01-06 3599
2 Multiple Image Viewer imagefile id: 보짱보짱 2010-01-06 3533
1 FAQ 자주하는 질문 id: 보짱보짱 2010-01-06 3478
XE Login