YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
 버튼 클릭시 변하는 내용
검색
멤버이름    오토
비밀번호 
 

버튼 클릭시 변하는 내용

페이지 정보

작성자 MintState 댓글 0건 조회 12,619회 작성일 08-11-07 10:53

본문

버튼 클릭시 변하는  내용 

<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>&nbsp;</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>&nbsp;</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>&nbsp;</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>

댓글목록

등록된 댓글이 없습니다.

Total 178건 8 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
열람중
버튼 클릭시 변하는 내용
MintState 12620 11-07
37
오른쪽 마우스 사용금지
MintState 12134 11-07
36
셀렉트박스 트리메뉴
MintState 11267 11-07
35
select시 특정 URL을 새창에서 열기
MintState 12995 11-07
34
showHideLayers(레이어 숨기고 보이게 하기)
MintState 11226 11-07
33
tree형 카테고리
MintState 12344 11-07
32
이메일, 회원아이디, 주민등록번호 체크
MintState 14207 11-03
31
아이콘 클릭시 이전 다음 이미지 나오고 클릭시 팝업창 뜨기
MintState 12321 10-31
30
아래위로 텍스트, 이미지 스크롤 제어되는 자바스크립트
MintState 11065 10-31
29
레이어 상하로 글자들이 스크롤되게하기
MintState 9217 10-31
28
qna 같은 곳에서 질문 클릭시 대답이 보이는 자바 스크립트
MintState 10082 10-31
27
실시간 이미지 불러와 width 와 height 가져오기
MintState 15081 10-31
26
간단한 오른쪽 마우스 클릭 금지
MintState 12784 10-31
25
URLEncode URLDecode
MintState 12548 10-31
24
window.open 옵션
MintState 12770 10-31
23
input 값이 한글인지 숫자인지 확인
MintState 16231 10-31
22
마우스 오버시 타나나는 레이어
MintState 15900 10-31
21
드래그시 자동복사
MintState 12125 10-31
20
tbody로 롤오버 게시판
MintState 9404 10-31
19
일정시간후 다른페이지로 이동
MintState 13825 10-31
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™