버튼 클릭시 변하는 내용
로빈아빠
본문
버튼 클릭시 변하는 내용
다른 방법
다른 방법 - 마우스 오버시 변하게 하기
가장 간단한 방법
<script language="JavaScript">
function premier(n) {
for(var i = 1; i < 7; i++) {
obj = document.getElementById('premier'+i);
img = document.getElementById('premier_button'+i);
if ( n == i ) {
obj.style.display = "block";
img.height = 49; //이미지 높이
img.src = "image/menu_up0"+i+".gif";
} else {
obj.style.display = "none";
img.height = 49; //이미지 높이
img.src = "image/menu_0"+i+".gif";
}
}
}
</script>
<table border=0 cellpadding=0 cellspacing=0>
<tr valign=bottom>
<td>
<img src=image/menu_up01.gif name="premier_button1" id='premier_button1' OnClick='premier(1);' style='cursor:hand'></a></td>
<td>
<img src=image/menu_02.gif OnClick='premier(2);' id='premier_button2' style='cursor:hand'></a></td>
<td>
<img src=image/menu_03.gif OnClick='premier(3);' id='premier_button3' style='cursor:hand'></a></td>
<td>
<img src=image/menu_04.gif OnClick='premier(4);' id='premier_button4' style='cursor:hand'></a></td>
<td>
<img src=image/menu_05.gif OnClick='premier(5);' id='premier_button5' style='cursor:hand'></a></td>
<td>
<img src=image/menu_06.gif OnClick='premier(6);' id='premier_button6' style='cursor:hand'></a></td>
<!--
<td>
<img src=img/main/search_menu_up01.gif name="premier_button1" id='premier_button1' OnClick='premier(1);' OnMouseOver='this.style.cursor="hand";premier(1);' OnMouseOut='this.style.cursor="default"'></a></td>
<td>
<img src=img/main/search_menu_02.gif OnClick='premier(2);' OnMouseOver='this.style.cursor="hand";premier(2);' OnMouseOut='this.style.cursor="default"' id='premier_button2'></a></td>
<td>
<img src=img/main/search_menu_03.gif OnClick='premier(3);' OnMouseOver='this.style.cursor="hand";premier(3);' OnMouseOut='this.style.cursor="default"' id='premier_button3'></a></td>
<td>
<img src=img/main/search_menu_04.gif OnClick='premier(4);' OnMouseOver='this.style.cursor="hand";premier(4);' OnMouseOut='this.style.cursor="default"' id='premier_button4'></a></td>
-->
</tr>
</table>
<table width="580" border=0 cellpadding=0 cellspacing=0 >
<tr>
<td valign="top" style="padding:5px 0 0 0">
<span id='premier1' style='display:none;'>
1번 화면
</span>
<span id='premier2' style='display:none;'>
2번 화면
</span>
<span id='premier3' style='display:none;'>
3번 화면
</span>
<span id='premier4' style='display:none;'>
4번 화면
</span>
<span id='premier5' style='display:none;'>
5번 화면
</span>
<span id='premier6' style='display:none;'>
6번 화면
</span>
</td>
</tr>
</table>
<script>
premier(1);
//괄호안에 숫자를 탭순서로 넣으면 그 탭이 활성화돼 열립니다
</script>
다른 방법
<SCRIPT type=text/javascript>
<!--
old_debate='1';
function showLayer(objid){
document.getElementById("debate"+old_debate).style.display="none";
document.getElementById("debate"+old_debate+"#1").style.display="";
document.getElementById("debate"+objid+"#1").style.display="none";
document.getElementById("debate"+objid).style.display="";
document.getElementById("debate_content"+old_debate).style.display="none";
document.getElementById("debate_content"+objid).style.display="";
old_debate=objid;
}
//-->
</SCRIPT>
<table width="315" border="0" cellspacing="0" cellpadding="0" background='menu_bg.gif'>
<tr>
<td width="5"></td>
<td>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD id=debate1><A href='./bbs/board.php?bo_table=b3_1' onfocus='this.blur()'><img src='menu_01on.gif' border=0 align=absmiddle></A></TD>
<TD id=debate1#1 style="DISPLAY: none;"><A href="javascript:showLayer('1')" onfocus='this.blur()'><img src='menu_01.gif' border=0 align=absmiddle></A></TD>
</TR>
</TABLE>
</td>
<td>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD id=debate2 style="DISPLAY: none;"><A href='./bbs/board.php?bo_table=b4_1' onfocus='this.blur()'><img src='menu_02on.gif' border=0 align=absmiddle></A></TD>
<TD id=debate2#1><A href="javascript:showLayer('2')" onfocus='this.blur()'><img src='menu_02.gif' border=0 align=absmiddle></A></TD>
</TR>
</TABLE>
</td>
<td>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD id=debate3 style="DISPLAY: none;"><A href='./bbs/board.php?bo_table=b4_1' onfocus='this.blur()'><img src='menu_03on.gif' border=0 align=absmiddle></A></TD>
<TD id=debate3#1><A href="javascript:showLayer('3')" onfocus='this.blur()'><img src='menu_03.gif' border=0 align=absmiddle></A></TD>
</TR>
</TABLE>
</td>
<td>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TR>
<TD id=debate4 style="DISPLAY: none;"><A href='./bbs/board.php?bo_table=b3_3' onfocus='this.blur()'><img src='menu_04on.gif' border=0 align=absmiddle></A> </TD>
<TD id=debate4#1><A href="javascript:showLayer('4')" onfocus='this.blur()'><img src='menu_04.gif' border=0 align=absmiddle></A></TD>
</TR>
</TABLE>
</td>
</tr>
<tr><td height="3" colspan="6"></td></tr>
</table>
<DIV id=debate_content1>
1번 화면
</DIV>
<DIV id=debate_content2 style="DISPLAY: none;">
2번 화면
</DIV>
<DIV id=debate_content3 style="DISPLAY: none;">
3번 화면
</DIV>
<DIV id=debate_content4 style="DISPLAY: none;">
4번 화면
</DIV>
다른 방법 - 마우스 오버시 변하게 하기
<table width=296 cellpadding=0 cellspacing=0>
<tr style='padding-top:5px;'>
<td height=23 width=44 align=center class=bb><span class='small cloudy'>인기글</span></td>
<td width=60 align=center id='new_1' class=bb><span onmouseover='set_tab(1)' style='cursor:pointer;'>오늘</span></td>
<td width=4 class=bb> </td>
<td width=60 align=center id='new_2' class=bb><span onmouseover='set_tab(2)' style='cursor:pointer;'>어제</span></td>
<td width=4 class=bb> </td>
<td width=60 align=center id='new_3' class=bb><span onmouseover='set_tab(3)' style='cursor:pointer;'>주간</span></td>
<td width=4 class=bb> </td>
<td width=60 align=center id='new_4' class=bb><span onmouseover='set_tab(4)' style='cursor:pointer;'>월간</span></td>
</tr>
<tr>
<td style='border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;padding:5px 5px 5px 5px;' colspan=8>
<div id='new_cont_1' style='display:none;'>
<nobr style='display:block;overflow:hidden;width:280px;'>new_cont_1</nobr>
</div>
<div id='new_cont_2' style='display:none;'>
<nobr style='display:block;overflow:hidden;width:280px;'>new_cont_2</nobr>
</div>
<div id='new_cont_3' style='display:none;'>
<nobr style='display:block;overflow:hidden;width:280px;'>new_cont_3</nobr>
</div>
<div id='new_cont_4' style='display:none;'>
<nobr style='display:block;overflow:hidden;width:280px;'>new_cont_4</nobr>
</div>
</td>
</tr>
</table>
<script>
var new_on = new Image();
var new_off = new Image();
new_on.src = "img/new_on.gif";
new_off.src = "img/new_off.gif";
var save_flag = 0;
function set_tab(flag) {
if (save_flag == flag) return;
var new_id = document.getElementById('new_'+flag);
var save_id = document.getElementById('new_'+save_flag);
if (save_flag) {
save_id.style.fontWeight = 'normal';
save_id.style.borderBottom = '1px solid #cccccc';
save_id.style.backgroundImage = '';
document.getElementById('new_cont_'+save_flag).style.display = 'none';
}
new_id.style.fontWeight = 'bold';
new_id.style.borderBottom = '1px solid #ffffff';
new_id.style.backgroundImage = "url('img/new_on.gif')";
document.getElementById('new_cont_'+flag).style.display = '';
save_flag = flag;
}
set_tab(1);
</script>
가장 간단한 방법
<script language='javascript'>
function Layerchange(SelectedImg){
if (SelectedImg == "m1") {
news1.src = "1_.jpg";
news2.src = "2.gif";
tab1_data.style.display = "";
tab2_data.style.display = "none";
} else if (SelectedImg == "m2") {
news1.src = "1.gif";
news2.src = "2_.jpg";
tab1_data.style.display = "none";
tab2_data.style.display = "";
}
}
</script>
<img id="news1" src="1.gif" onmouseover="Layerchange('m1')">
<img id="news2" src="2.gif" onmouseover="Layerchange('m2')">
<div id="tab1_data">Data1</div>
<div id="tab2_data" style="display:none">Data2</div>관련링크
댓글목록
등록된 댓글이 없습니다.