글 수 16
보짱활성화된 탭의 이미지 변경을 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>
소속 : 밀짚모자 해적단
