묻고답하기
가로메뉴 문의 드립니다.(두번째)
2007.08.28 02:19
제로보드4에서는 자바나 php 등을 잘 몰라도
대충 소스보고 집어 넣고 삽질 몇 번해서 맞춰나갔는데
이번 제로보드xe는 자바 등을 모르니 완전 해메고있습니다.
사이트 만들 때 가장 중요한 부분 중의
하나가 메뉴인데 여기서 한 발도 못나가고 있습니다 --;;
1)
본래 사용하던 가로메뉴를 응용해서 작용할 실력이 없어
아래의 가로메뉴로 바꾸기로 하고 한번 시도해 보았습니다.
http://www.sourcenara.com/SourcenaraScript/menu/117/example.htm
( 새로 만들기로 한 소스나라에 있는 가로메뉴의 예제)
2)
결과는 아래 링크와 같이 메인메뉴에 마우스를 대면 아래 서버메뉴는 제대로 나오는 것 같은데
메인메뉴 이미지는 한번 댄 이후에는 나타나지 않습니다.
http://2006un.org/zbxe/
그 이유가 무엇인지 긍금해서 문의드립니다.
-만든 순서-
A. 레이아웃 내용
(젤위의 js임포트 부분과 이미지 경로수정(빨간 부분)외엔 원본 소서를 그대로 넣었습니다)
<!-- js 파일 import -->
<!--%import("js/menu.js")-->
<!--메뉴 테이블 시작-->
<TABLE WIDTH="555" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<!-- menu1 -->
<TD valign="bottom"><A HREF="http://www.sourcenara.com" onMouseOver="showHideLayers('document.layers["Layer2"]','document.all["Layer2"]','show');active('ms01')" onMouseOut="showHideLayers('document.layers["Layer2"]','document.all["Layer2"]','hide');inactive('ms01')"><IMG SRC="images/menu1.jpg" WIDTH="111" HEIGHT="18" ALT="" BORDER="0" NAME="ms01"></A></TD>
<!-- menu2 -->
<TD valign="bottom"><DIV id="tv_1"><A HREF="http://www.sourcenara.com" onMouseOver="showHideLayers('document.layers["tv_2"]','document.all["tv_2"]','show');active('ms02')" onMouseOut="showHideLayers('document.layers["tv_2"]','document.all["tv_2"]','hide');inactive('ms02')"><IMG SRC="images/menu2.jpg" WIDTH="111" HEIGHT="18" ALT="" BORDER="0" NAME="ms02"></A></DIV>
<!-- menu2의 서브메뉴 -->
<div id="tv_2" style="position:absolute; left:30px; top:30px; visibility: hidden"><a href="#" onMouseOver="showHideLayers('document.layers["tv_2"]','document.all["tv_2"]','show');active('ms02')" onMouseOut="showHideLayers('document.layers["tv_2"]','document.all["tv_2"]','hide');inactive('ms02')">
<table width="535" height="30" border="0" cellpadding="0" cellspacing="0">
<tr><td><A HREF="http://www.sourcenara.com" target="_blank">Xcanvas</a> | <A HREF="http://www.sourcenara.com" target="_blank">플라즈마TV</a> | <A HREF="http://www.sourcenara.com" target="_blank">프로젝션TV</a> | <A HREF="http://www.sourcenara.com" alt="dddd" target="_blank">액정TV</a> | <A HREF="http://www.sourcenara.com" target="_blank">평면TV</a> | <A HREF="http://www.sourcenara.com" target="_blank">일반TV</a> | <A HREF="http://www.sourcenara.com" target="_blank">비디오TV</a> | <A HREF="http://www.sourcenara.com" target="_blank">비디오</a> | <A HREF="http://www.sourcenara.com" target="_blank">캠코더</a></td></tr></table></a></div>
</TD>
<!-- menu3 -->
<TD valign="bottom"><DIV id="oudio_1"><A HREF="http://www.sourcenara.com" onMouseOver="showHideLayers('document.layers["oudio_2"]','document.all["oudio_2"]','show'+
'+
');active('ms03')" onMouseOut="showHideLayers('document.layers["oudio_2"]','document.all["oudio_2"]','hide');inactive('ms03')"><IMG SRC="images/menu3.jpg" WIDTH="111" HEIGHT="18" ALT="" BORDER="0" NAME="ms03"></A></DIV>
<!-- menu3의 서브메뉴 -->
<div id="oudio_2" style="position:absolute; left:30px; top:30px; visibility: hidden"><a href="#" onMouseOver="showHideLayers('document.layers["oudio_2"]','document.all["oudio_2"]','show');active('ms03')" onMouseOut="showHideLayers('document.layers["oudio_2"]','document.all["oudio_2"]','hide');inactive('ms03')">
<table width="525" height="30" border="0" cellpadding="0" cellspacing="0">
<tr><td><A HREF="http://www.sourcenara.com" target="_blank">오디오콤포넌트</a> | <A HREF="http://www.sourcenara.com" target="_blank">MP3 Player</a> | <A HREF="http://www.sourcenara.com" target="_blank">아하프리카세트</a> | <A HREF="http://www.sourcenara.com" target="_blank">일반카세트</a> | <A HREF="http://www.sourcenara.com" target="_blank">CD 레코더</a> | <A HREF="http://www.sourcenara.com" target="_blank">홈시어터시스템</a></td></tr></table></a></div>
</TD>
<!-- menu4 -->
<TD valign="bottom"><DIV id="computer_1"><A HREF="http://www.sourcenara.com" onMouseOver="showHideLayers('document.layers["computer_2"]','document.all["computer_2"]','show');active('ms04')" onMouseOut="showHideLayers('document.layers["computer_2"]','document.all["computer_2"]','hide');inactive('ms04')"><IMG SRC="images/menu4.jpg" WIDTH="111" HEIGHT="18" ALT="" BORDER="0" NAME="ms04"></A></DIV>
<!-- menu4의 서브메뉴 -->
<div id="computer_2" style="position:absolute; left:50px; top:30px; visibility: hidden"><a href="#" onMouseOver="showHideLayers('document.layers["computer_2"]','document.all["computer_2"]','show');active('ms04')" onMouseOut="showHideLayers('document.layers["computer_2"]','document.all["computer_2"]','hide');inactive('ms04')">
<table width="525" height="30" border="0" cellpadding="0" cellspacing="0">
<tr><td><A HREF="http://www.sourcenara.com" target="_blank">데스크탑</a> | <A HREF="http://www.sourcenara.com" target="_blank">노트북</a> | <A HREF="http://www.sourcenara.com" target="_blank">모니터</a> | <A HREF="http://www.sourcenara.com" target="_blank">프린터</a> | <A HREF="http://www.sourcenara.com" target="_blank">스캐너</a> | <A HREF="http://www.sourcenara.com" target="_blank">PC카메라</a> | <A HREF="http://www.sourcenara.com" target="_blank">CD-RW/DVD/DVD콤보</a> | <A HREF="http://www.sourcenara.com" target="_blank">저장장치</a></td></tr></table></a></div>
</TD>
<!-- menu5 -->
<TD valign="bottom"><DIV id="life_1"><A HREF="http://www.sourcenara.com" onMouseOver="showHideLayers('document.layers["life_2"]','document.all["life_2"]','show');active('ms05')" onMouseOut="showHideLayers('document.layers["life_2"]','document.all["life_2"]','hide');inactive('ms05')"><IMG SRC="images/menu5.jpg" WIDTH="111" HEIGHT="18" ALT="" BORDER="0" NAME="ms05"></A></DIV>
<!-- menu5의 서브메뉴 -->
<div id="life_2" style="position:absolute; left:250px; top:30px; visibility: hidden"><a href="#" onMouseOver="showHideLayers('document.layers["life_2"]','document.all["life_2"]','show');active('ms05')" onMouseOut="showHideLayers('document.layers["life_2"]'+
','document.all["life_2"]','hide');inactive('ms05')">
<table width="315" height="30" border="0" cellpadding="0" cellspacing="0">
<tr><td><A HREF="http://www.sourcenara.com" target="_blank">세탁기</a> | <A HREF="http://www.sourcenara.com" target="_blank">청소기</a> | <A HREF="http://www.sourcenara.com" target="_blank">조명기기</a> | <A HREF="http://www.sourcenara.com" target="_blank">가습기</a> | <A HREF="http://www.sourcenara.com" target="_blank">전화기</a> | <A HREF="http://www.sourcenara.com" target="_blank">휴대폰</a></td></tr></table></a></div>
</TD>
</TR>
<TR>
<TD HEIGHT="20" COLSPAN="9" BGCOLOR="#CCCCCC"></TD>
</TR>
<TR>
<TD HEIGHT="1" COLSPAN="9" BGCOLOR="#FFFFFF"></TD>
</TR>
</TABLE>
<!--메뉴 테이블 끝-->
B. js 파일 내용
(내용은 원래 소스를 그대로 사용하고 이미지 경로(빨간 부분)만 바꿔 주었습니다)
function preloadImages() {
if (document.images) {
var imgFiles = preloadImages.arguments;
if (document.preloadArray==null) document.preloadArray = new Array();
var i = document.preloadArray.length;
with (document) for (var j=0; j<imgFiles.length; j++) if (imgFiles[j].charAt(0)!="#"){
preloadArray[i] = new Image;
preloadArray[i++].src = imgFiles[j];
} }
}
function findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function help() {
var i,p,v,obj,args=help.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
function showHideLayers() {
var i, visStr, args, theObj;
args = showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) {
visStr = args[i+2];
if (navigator.appName == 'Netscape' && document.layers != null) {
theObj = eval(args[i]);
if (theObj) theObj.visibility = visStr;
} else if (document.all != null) {
if (visStr == 'show') visStr = 'visible';
if (visStr == 'hide') visStr = 'hidden';
theObj = eval(args[i+1]);
if (theObj) theObj.style.visibility = visStr;
} }
}
function swapImgRestore() {
if (document.swapImgData != null)
for (var i=0; i<(document.swapImgData.length-1); i+=2)
document.swapImgData[i].src = document.swapImgData[i+1];
}
function swapImage() {
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.swapImgData;
for (i=0; i < (swapImage.arguments.length-2); i+=3) {
objStr = swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ||
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null || oldArray[j-1]!=obj)?obj.src:oldArray[j];
obj.src = swapImage.arguments[i+2];
} }
document.swapImgData = swapArray;
}
function Selection_change(Select)
{
i=Select.selectedIndex;
if(Select.options[i].value != 0)
{
top.down.location = Select.options[i].value;
}
Select.selectedIndex = 0;
}
function active(direction) {
imgOn = eval(direction+ "r.src");
document[direction].src = imgOn;
}
function inactive(direction) {
imgOff = eval(direction+ "n.src");
document[direction].src = imgOff;
}
ms01n = new Image()
// menu1 마우스 오버전의 이미지 경로 및 파일명
ms01n.src = "../images/menu1.jpg"
ms01r = new Image()
// men12 마우스 오버했을 때 나타나는 이미지의 경로 및 파일명
ms01r.src = "../images/menu1over.jpg"
ms02n = new Image()
ms02n.src = "../images/menu2.jpg"
ms02r = new Image()
ms02r.src = "../images/menu2over.jpg"
ms03n = new Image()
ms03n.src = "../images/menu3.jpg"
ms03r = new Image()
ms03r.src = "../images/menu3over.jpg"
ms04n = new Image()
ms04n.src = "images/menu4.jpg"
ms04r = new Image()
ms04r.src = "../images/menu4over.jpg"
ms05n = new Image()
ms05n.src = "../images/menu5.jpg"
ms05r = new Image()
ms05r.src = "../images/menu5over.jpg"
댓글 2
-
고라리
2007.08.28 08:25
-
경천애인
2007.08.28 16:03
고라라님의 말씀대로
js 파일안에 이미지의 주소를 상대경로인 "../images/파일명" 의형태로 수정을 해보았는데도
그대로 마우스오보되었을때 이미지가 나타나지 않는군요.
원래 제가 제로4에서 사용하던 가로메뉴를 xe에 적용해도 되지않고
그래서 여러 종류의 가로메뉴(이미지가 없는 것들도 포함해서)를 테스트 해봐도 결론은 다 잘 안되었습니다.
제로보드4에서는 인터넷등에 있는 가로메뉴를 참조하여
헤드 사이에 자바스크립트 부분 넣고 바디에 해당 메뉴부분을 약간 수정해서 대강 맞추면 잘 돌아 가는데
제로보드xe에서는 가로 메뉴를 어떻게 적용하는지 그 방법을 나름대로 한참 찾아봐도 답이 안나와서
그래서 답답해서 문의를 드린 것 입니다. 물론 저의 실력이 없어서 그런것이겠지요.
이미지외에 수정없이 원본 그대로 작용을 해봐도 안되는 것이 js파일을 적용시키는데에
제가 모르는 무슨 이유가 있을 것인데 그것을 찾지 못해서 참 답답합니다.
답은 나오겠지만 실력이 없는 저로서는 그 과정이 쉽지 않군요--;;
고라리님~
더운 날씨에 친절한 답변 주셔서 감사드립니다^^
보통 레이아웃 폴더에는 layout.html파일이 있고 images폴더 js폴더 css폴더가 있죠.
그리고 스크립 파일은 대부분 js폴더에 있을테구요. 이런 상황에서 layout.html에서 다른 폴더에 있는
파일에 접근하기 위해서는 "폴더명/파일명" 을 사용하면 되지만, js 폴더내에 있는 파일이
다른 폴더의, 예를 들면, images폴더의 파일에 접근하기 위해서는 "../images/파일명"
이런식으로 상대주소를 지정해줘야 합니다.
즉, 하위폴더의 파일에서 다른 하위폴더의 파일에 접근하려면 우선 공통의 상위폴더로 이동한 다음에
목적 하위폴더로 접근해야 하죠...