자바스크립에서 1번매뉴를 고정시키는방법좀 알려주세요.소스첨부 정보
자바스크립에서 1번매뉴를 고정시키는방법좀 알려주세요.소스첨부첨부파일
본문
우선 바쁘신데 제글을 봐주셔서 너무감사합니다.
다름이 아니라 아래에 첨부한 소스를 사용할려고하는데요.
소스를 열어보시면 기본적으로 아무것도 눌러져있지안는 상태이자나요?
1번~5번 매뉴가있는데 처음 페이지를 열때,하나가 선택된 상태로 사용하고싶거든요.
예를들어 1번이 클릭된상태로 1번 매뉴가 보여지는걸로 하고싶은데,ㅠ도저히 어떡게 하는지 잘모르겠어요. 꼭좀 도와주세요
소스
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<HTML>
<HEAD>
<title>http://happyscript.net </title>
<META content="text/html; charset=ks_c_5601-1987" http-equiv="Content-Type">
<!-- 스타일 부분은 없어도 상관없습니다. 프로그램과 관련없습니다 -->
<style>
<!--
small {font-size:8pt;font-family:??}
font,td,p {font-size: 9pt;text-decoration: none;font-family:??}
<!--
A:link, A:active, A:visited {color:"#000000"; font-size:9pt; text-decoration: none}
A:hover {text-decoration:none; color:"#666600"}
.notice {font-size:9pt; color:black; text-decoration: none}
a.01 {color:#7F7F7F; text-decoration:none}
a.01:visited {color:#7F7F7F; text-decoration:none}
a.01:hover {color:#4A4A4A; text-decoration:underline}
-->
</style>
<script>
var nscp = (navigator.appName == "Netscape")
var ismc = (navigator.appVersion.indexOf("Mac") != -1)
var vers = parseFloat(navigator.appVersion.substring(22,25))
function getObj(obj) {
if (nscp) {
compLayr = document.layers[obj]
}else{
compLayr = eval("document.all." + obj + ".style")
}
return compLayr
}
function show(layr){
obj = getObj(layr)
obj.visibility = "visible"
}
function hide(layr){
obj = getObj(layr)
obj.visibility = "hidden"
}
function menuRoll(which,status,total){
if (status){
currentMenuChoice = which
show("info" + currentMenuChoice)
checkinfo(total)
}
}
function fontRoll(which,status,total){
if (status){
currentMenuChoice = which
obj = getObj("font"+currentMenuChoice)
obj.color = "blue"
checkfont(total)
}
}
function checkinfo(total){
for(r=1;r<= total ;r++){
if(r != currentMenuChoice){
hide("info" + r)
}
}
setTimeout("checkinfo()",50)
}
function checkfont(total){
for(r=1;r<= total ;r++){
if(r != currentMenuChoice){
obj = getObj("font"+r)
obj.color = "#757575"
}
}
setTimeout("checkfont()",50)
}
</script>
<script>
//여기의 tab_cnt는 이미지 메뉴의 수입니다.(롤오버되는 이미지만)
//그래서 메뉴의 갰수가 바뀌는 경우 꼭 바꾸어 주어야 합니다.(중요)
//안바꿔주면 에러납니다.
var tab_cnt = 5;
// 일반 이미지입니다. 원하는 메뉴 갯수만큼 만들어 주어야 합니다.
//이미지의 이름은 꼭 images_tab/htab{순번}0.gif 형식이어야 합니다.
// 순번은 1부터 시작하고요.
img_url = new Array();
img_url[0] = new Image();
img_url[1] = new Image();
img_url[2] = new Image();
img_url[3] = new Image();
img_url[4] = new Image();
img_url[0].src = "http://happyscript.net/images_tab/htab10.gif";
img_url[1].src = "http://happyscript.net/images_tab/htab20.gif";
img_url[2].src = "http://happyscript.net/images_tab/htab30.gif";
img_url[3].src = "http://happyscript.net/images_tab/htab60.gif";
img_url[4].src = "http://happyscript.net/images_tab/htab40.gif";
// 마우스 오버시의 이미지입니다. 원하는 메뉴 갯수만큼 만들어 주어야 합니다.
//이미지의 이름은 꼭 images_tab/htab{순번}1.gif 형식이어야 합니다.
// 순번은 1부터 시작하고요.
img_a_url = new Array();
img_a_url[0] = new Image();
img_a_url[1] = new Image();
img_a_url[2] = new Image();
img_a_url[3] = new Image();
img_a_url[4] = new Image();
img_a_url[0].src = "http://happyscript.net/images_tab/htab11.gif";
img_a_url[1].src = "http://happyscript.net/images_tab/htab21.gif";
img_a_url[2].src = "http://happyscript.net/images_tab/htab31.gif";
img_a_url[3].src = "http://happyscript.net/images_tab/htab61.gif";
img_a_url[4].src = "http://happyscript.net/images_tab/htab41.gif";
var menu_url = new Array();
menu_url[0] = "menu_happy.shtml"
menu_url[1] = "menu_bbs.html"
menu_url[2] = "menu_jas.html"
menu_url[3] = "menu_lect.html"
menu_url[4] = "menu_cgi.html"
var main_url = new Array();
main_url[0] = "main_happy.shtml"
main_url[1] = "main_bbs.html"
main_url[2] = "mian_jas.html"
main_url[3] = "main_lect.html"
main_url[4] = "main_cgi.html"
//이부분이 마우스 오버시 처리하는 부분입니다.
//당근, 직접 이름을 프로그램안에 넣었기 때문에 이름을 같이 해 주어야 합니다.
// 이말은 tab10.gif 이 마우스 오버시 tab11.gif로 바뀌고 나머지는 전부
//원위치 하게 되는거죠(tab{순번}0.gif)
function changetab (no) {
for (i=1; i<= tab_cnt;i++){
obj = eval("document.images.tab"+i);
if (i == no){
//obj.src = "images_tab/htab"+i+"1.gif";
obj.src = img_a_url[i-1].src;
//parent.left.location.href = menu_url[i-1];
//location.href = menu_url[i-1];
}else{
//obj.src = "images_tab/htab"+i+"0.gif";
obj.src = img_url[i-1].src;
}
}
}
</script>
</HEAD>
<BODY leftmargin=0 topmargin=0 marginwidth="0" marginheight="0">
<center>
<table border=0 cellpadding=0 cellspacing=0 xwidth=100%>
<tr align=left xvalign=bottom>
<td>
<table border=0 cellpadding=0 cellspacing=0 width=100% >
<tr xbgcolor=#e8e8e8 xalign=center valign=bottom>
<td width=150 xheight=57>
<img src="http://happyscript.net/images_tab/htab00.gif" width=100% height=1 border=0></td>
<td width=85>
<!-- 여기서 중요한것은 id=tab1 부분입니다.
메뉴를 추가하는 경우 tab6, tab7..... 이런식으로 마지막까지 순서대로 바꾸어 주어야 합니다.
-->
<a href="http://happyscript.net"><img id=tab1 src="http://happyscript.net/images_tab/htab10.gif" onmouseover="changetab(1);menuRoll(1,true,5)" alt="happyscript.net" onclick="changetab(1)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><img id=tab2 src="http://happyscript.net/images_tab/htab20.gif" onmouseover="changetab(2);menuRoll(2,true,5)" alt="happyscript.net" onclick="changetab(2)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><img id=tab3 src="http://happyscript.net/images_tab/htab30.gif" onmouseover="changetab(3);menuRoll(3,true,5)" alt="happyscript.net" onclick="changetab(3)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><img id=tab4 src="http://happyscript.net/images_tab/htab40.gif" onmouseover="changetab(4);menuRoll(4,true,5)" alt="happyscript.net" onclick="changetab(4)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><!-- 여기서 중요한것은 id=tab{순번} 부분입니다.
메뉴를 추가하는 경우 tab6, tab7..... 이런식으로 마지막까지 순서대로 바꾸어 주어야 합니다.
-->
<img id=tab5 src="http://happyscript.net/images_tab/htab50.gif" onmouseover="changetab(5);menuRoll(5,true,5)" alt="happyscript.net" onclick="changetab(5)" border=0></a></td>
<td>
<img src="http://happyscript.net/images_tab/htab00.gif" width=100% height=1 border=0></td>
</tr>
</table>
</td>
</tr>
<tr align=left valign=top>
<td>
<table width=100% border=0 cellpadding=0 cellspacing=0 name="?" height=20 bgcolor=#CCFFCC>
<tr align=left valign=bottom>
<td width="150">
</td>
<td xstyle="COLOR: #7c7c7c; LINE-HEIGHT: 10px" xheight=20 xbgcolor=#CCFFCC>
<div id="info1" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m1-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m1-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m1-sub3.asp</a>
</div>
<div id="info2" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m2-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m21-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m2-sub3.asp</a>
</div>
<div id="info3" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m3-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m3-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m3-sub3.asp</a>
</div>
<div id="info4" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m4-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m4-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m4-sub3.asp</a>
</div>
<div id="info5" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m5-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m5-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m5-sub3.asp</a>
</div>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
끝 감사합니다 ^^
다름이 아니라 아래에 첨부한 소스를 사용할려고하는데요.
소스를 열어보시면 기본적으로 아무것도 눌러져있지안는 상태이자나요?
1번~5번 매뉴가있는데 처음 페이지를 열때,하나가 선택된 상태로 사용하고싶거든요.
예를들어 1번이 클릭된상태로 1번 매뉴가 보여지는걸로 하고싶은데,ㅠ도저히 어떡게 하는지 잘모르겠어요. 꼭좀 도와주세요
소스
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<HTML>
<HEAD>
<title>http://happyscript.net </title>
<META content="text/html; charset=ks_c_5601-1987" http-equiv="Content-Type">
<!-- 스타일 부분은 없어도 상관없습니다. 프로그램과 관련없습니다 -->
<style>
<!--
small {font-size:8pt;font-family:??}
font,td,p {font-size: 9pt;text-decoration: none;font-family:??}
<!--
A:link, A:active, A:visited {color:"#000000"; font-size:9pt; text-decoration: none}
A:hover {text-decoration:none; color:"#666600"}
.notice {font-size:9pt; color:black; text-decoration: none}
a.01 {color:#7F7F7F; text-decoration:none}
a.01:visited {color:#7F7F7F; text-decoration:none}
a.01:hover {color:#4A4A4A; text-decoration:underline}
-->
</style>
<script>
var nscp = (navigator.appName == "Netscape")
var ismc = (navigator.appVersion.indexOf("Mac") != -1)
var vers = parseFloat(navigator.appVersion.substring(22,25))
function getObj(obj) {
if (nscp) {
compLayr = document.layers[obj]
}else{
compLayr = eval("document.all." + obj + ".style")
}
return compLayr
}
function show(layr){
obj = getObj(layr)
obj.visibility = "visible"
}
function hide(layr){
obj = getObj(layr)
obj.visibility = "hidden"
}
function menuRoll(which,status,total){
if (status){
currentMenuChoice = which
show("info" + currentMenuChoice)
checkinfo(total)
}
}
function fontRoll(which,status,total){
if (status){
currentMenuChoice = which
obj = getObj("font"+currentMenuChoice)
obj.color = "blue"
checkfont(total)
}
}
function checkinfo(total){
for(r=1;r<= total ;r++){
if(r != currentMenuChoice){
hide("info" + r)
}
}
setTimeout("checkinfo()",50)
}
function checkfont(total){
for(r=1;r<= total ;r++){
if(r != currentMenuChoice){
obj = getObj("font"+r)
obj.color = "#757575"
}
}
setTimeout("checkfont()",50)
}
</script>
<script>
//여기의 tab_cnt는 이미지 메뉴의 수입니다.(롤오버되는 이미지만)
//그래서 메뉴의 갰수가 바뀌는 경우 꼭 바꾸어 주어야 합니다.(중요)
//안바꿔주면 에러납니다.
var tab_cnt = 5;
// 일반 이미지입니다. 원하는 메뉴 갯수만큼 만들어 주어야 합니다.
//이미지의 이름은 꼭 images_tab/htab{순번}0.gif 형식이어야 합니다.
// 순번은 1부터 시작하고요.
img_url = new Array();
img_url[0] = new Image();
img_url[1] = new Image();
img_url[2] = new Image();
img_url[3] = new Image();
img_url[4] = new Image();
img_url[0].src = "http://happyscript.net/images_tab/htab10.gif";
img_url[1].src = "http://happyscript.net/images_tab/htab20.gif";
img_url[2].src = "http://happyscript.net/images_tab/htab30.gif";
img_url[3].src = "http://happyscript.net/images_tab/htab60.gif";
img_url[4].src = "http://happyscript.net/images_tab/htab40.gif";
// 마우스 오버시의 이미지입니다. 원하는 메뉴 갯수만큼 만들어 주어야 합니다.
//이미지의 이름은 꼭 images_tab/htab{순번}1.gif 형식이어야 합니다.
// 순번은 1부터 시작하고요.
img_a_url = new Array();
img_a_url[0] = new Image();
img_a_url[1] = new Image();
img_a_url[2] = new Image();
img_a_url[3] = new Image();
img_a_url[4] = new Image();
img_a_url[0].src = "http://happyscript.net/images_tab/htab11.gif";
img_a_url[1].src = "http://happyscript.net/images_tab/htab21.gif";
img_a_url[2].src = "http://happyscript.net/images_tab/htab31.gif";
img_a_url[3].src = "http://happyscript.net/images_tab/htab61.gif";
img_a_url[4].src = "http://happyscript.net/images_tab/htab41.gif";
var menu_url = new Array();
menu_url[0] = "menu_happy.shtml"
menu_url[1] = "menu_bbs.html"
menu_url[2] = "menu_jas.html"
menu_url[3] = "menu_lect.html"
menu_url[4] = "menu_cgi.html"
var main_url = new Array();
main_url[0] = "main_happy.shtml"
main_url[1] = "main_bbs.html"
main_url[2] = "mian_jas.html"
main_url[3] = "main_lect.html"
main_url[4] = "main_cgi.html"
//이부분이 마우스 오버시 처리하는 부분입니다.
//당근, 직접 이름을 프로그램안에 넣었기 때문에 이름을 같이 해 주어야 합니다.
// 이말은 tab10.gif 이 마우스 오버시 tab11.gif로 바뀌고 나머지는 전부
//원위치 하게 되는거죠(tab{순번}0.gif)
function changetab (no) {
for (i=1; i<= tab_cnt;i++){
obj = eval("document.images.tab"+i);
if (i == no){
//obj.src = "images_tab/htab"+i+"1.gif";
obj.src = img_a_url[i-1].src;
//parent.left.location.href = menu_url[i-1];
//location.href = menu_url[i-1];
}else{
//obj.src = "images_tab/htab"+i+"0.gif";
obj.src = img_url[i-1].src;
}
}
}
</script>
</HEAD>
<BODY leftmargin=0 topmargin=0 marginwidth="0" marginheight="0">
<center>
<table border=0 cellpadding=0 cellspacing=0 xwidth=100%>
<tr align=left xvalign=bottom>
<td>
<table border=0 cellpadding=0 cellspacing=0 width=100% >
<tr xbgcolor=#e8e8e8 xalign=center valign=bottom>
<td width=150 xheight=57>
<img src="http://happyscript.net/images_tab/htab00.gif" width=100% height=1 border=0></td>
<td width=85>
<!-- 여기서 중요한것은 id=tab1 부분입니다.
메뉴를 추가하는 경우 tab6, tab7..... 이런식으로 마지막까지 순서대로 바꾸어 주어야 합니다.
-->
<a href="http://happyscript.net"><img id=tab1 src="http://happyscript.net/images_tab/htab10.gif" onmouseover="changetab(1);menuRoll(1,true,5)" alt="happyscript.net" onclick="changetab(1)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><img id=tab2 src="http://happyscript.net/images_tab/htab20.gif" onmouseover="changetab(2);menuRoll(2,true,5)" alt="happyscript.net" onclick="changetab(2)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><img id=tab3 src="http://happyscript.net/images_tab/htab30.gif" onmouseover="changetab(3);menuRoll(3,true,5)" alt="happyscript.net" onclick="changetab(3)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><img id=tab4 src="http://happyscript.net/images_tab/htab40.gif" onmouseover="changetab(4);menuRoll(4,true,5)" alt="happyscript.net" onclick="changetab(4)" border=0></a></td>
<td width=85>
<a href="http://happyscript.net"><!-- 여기서 중요한것은 id=tab{순번} 부분입니다.
메뉴를 추가하는 경우 tab6, tab7..... 이런식으로 마지막까지 순서대로 바꾸어 주어야 합니다.
-->
<img id=tab5 src="http://happyscript.net/images_tab/htab50.gif" onmouseover="changetab(5);menuRoll(5,true,5)" alt="happyscript.net" onclick="changetab(5)" border=0></a></td>
<td>
<img src="http://happyscript.net/images_tab/htab00.gif" width=100% height=1 border=0></td>
</tr>
</table>
</td>
</tr>
<tr align=left valign=top>
<td>
<table width=100% border=0 cellpadding=0 cellspacing=0 name="?" height=20 bgcolor=#CCFFCC>
<tr align=left valign=bottom>
<td width="150">
</td>
<td xstyle="COLOR: #7c7c7c; LINE-HEIGHT: 10px" xheight=20 xbgcolor=#CCFFCC>
<div id="info1" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m1-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m1-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m1-sub3.asp</a>
</div>
<div id="info2" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m2-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m21-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m2-sub3.asp</a>
</div>
<div id="info3" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m3-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m3-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m3-sub3.asp</a>
</div>
<div id="info4" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m4-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m4-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m4-sub3.asp</a>
</div>
<div id="info5" style="width:200px; height:200px; position:absolute; left:50px; top:50px; z-index:1; visibility:hidden;">
<a href="http://happyscript.net" target=_blank>m5-sub1.asp</a> |
<a href="http://happyscript.net" target=_blank>m5-sub2.asp</a> |
<a href="http://happyscript.net" target=_blank>m5-sub3.asp</a>
</div>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
끝 감사합니다 ^^
댓글 전체
<script type="text/javascript">
// 1번 메뉴가 선택된 상태로 페이지 열기
window.onload= function()
{
changetab(1);
menuRoll(1, true, 5);
}
</script>
// 1번 메뉴가 선택된 상태로 페이지 열기
window.onload= function()
{
changetab(1);
menuRoll(1, true, 5);
}
</script>
좋은정보 감사합니다.
