묻고답하기
레이어가 뜰 위치는 어떻게 잡아줘야 할지...
2003.10.10 18:53
저번에 질문을 드렸는데 부가질문 드립니다.
이미지메뉴가 있고 그 메뉴에 마우스를 가져가면 큰 배너위에 반투명한 보조메뉴 바가 나타나거든요.
그래서 저번에 소스를 올려주셔서 이제 테스트를 하려고 하는데, 그 보조메뉴가 나타날 레이어의 위치를 어떻게 정해주는건가요.. 보니깐 아무곳이나떠서요... 그리고 레이어안에 들어가는 테이블 소스는 실제 html코드상에서 상관이 없는건가요? 그러니깐 영향을 미치지 않는건가요?
답변 부탁드립니다..
*************************************************************
* 저번에 올렸던 질문..
안녕하세요.
어떤 홈페이지에 가보면 주메뉴 밑에 바로 커다란배너가 있던데, 주메뉴에 마우스를 대게 되면 배너위에 반투명하게 보조메뉴가 나타나는걸 보았습니다.
홈페이지를 그렇게 만들고 싶은데..도무지 어떻게 하는건지 모르겠습니다.
도와주세요...
아시는 분..답변부탁드려요...
그럼 안녕히계세요...
* 그 답변
1) <head>와</head>사이에 ...
<script language=javascript>
<!--
// 필터 적용 함수
function trans(id,after)
{
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
function Find_Obj(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=Find_Obj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
// 부메뉴 레이어 숨김/보이기 함수
function Show_Hide() {
var i,p,v,obj,args=Show_Hide.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=Find_Obj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<body>와</body>사이에...
2-1> 아래와 같이 레이어를 만드세요...확장가능
<div id="Layer1" style="background-color:black; width:310px; height:23px; position:absolute; left:190px; top:108px; z-index:2; visibility:hidden; layer-background-color:black; ">
<table width="307"><tr>
<td width="301"><a href="링크주소1" target="타겟지정"><font color="white">레이어메뉴1</a> | <a href="링크주소2" target="타겟지정">레이어메뉴2</a> </font></td>
</tr></table>
</div>
2-2) 명령어입력
<img src="메뉴아이콘" id=aa style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','show','Layer2','','hide','layer3','','hide');trans('aa','마우스오버시 변경될 메뉴아이콘');" onMouseOut="trans('aa','마우스아웃시 보일 메뉴아이콘');" border=0 width="120" height="20" vspace="0" hspace="0">
* 중요포인트: 레이어의 갯수만큼의 명령어가 지정되어야합니다. 안그러면 에러발생
명령어입력시 id= <= 이부분은 절대 중복안되게 bb, cc등으로 지정바람, 각각의 명령어마다 3번입니다.
Show_Hide('Layer1','','show','Layer2','','hide','layer3','','hide') show/hide는 원하는 대로 변경가능..
이미지메뉴가 있고 그 메뉴에 마우스를 가져가면 큰 배너위에 반투명한 보조메뉴 바가 나타나거든요.
그래서 저번에 소스를 올려주셔서 이제 테스트를 하려고 하는데, 그 보조메뉴가 나타날 레이어의 위치를 어떻게 정해주는건가요.. 보니깐 아무곳이나떠서요... 그리고 레이어안에 들어가는 테이블 소스는 실제 html코드상에서 상관이 없는건가요? 그러니깐 영향을 미치지 않는건가요?
답변 부탁드립니다..
*************************************************************
* 저번에 올렸던 질문..
안녕하세요.
어떤 홈페이지에 가보면 주메뉴 밑에 바로 커다란배너가 있던데, 주메뉴에 마우스를 대게 되면 배너위에 반투명하게 보조메뉴가 나타나는걸 보았습니다.
홈페이지를 그렇게 만들고 싶은데..도무지 어떻게 하는건지 모르겠습니다.
도와주세요...
아시는 분..답변부탁드려요...
그럼 안녕히계세요...
* 그 답변
1) <head>와</head>사이에 ...
<script language=javascript>
<!--
// 필터 적용 함수
function trans(id,after)
{
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
function Find_Obj(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=Find_Obj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
// 부메뉴 레이어 숨김/보이기 함수
function Show_Hide() {
var i,p,v,obj,args=Show_Hide.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=Find_Obj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<body>와</body>사이에...
2-1> 아래와 같이 레이어를 만드세요...확장가능
<div id="Layer1" style="background-color:black; width:310px; height:23px; position:absolute; left:190px; top:108px; z-index:2; visibility:hidden; layer-background-color:black; ">
<table width="307"><tr>
<td width="301"><a href="링크주소1" target="타겟지정"><font color="white">레이어메뉴1</a> | <a href="링크주소2" target="타겟지정">레이어메뉴2</a> </font></td>
</tr></table>
</div>
2-2) 명령어입력
<img src="메뉴아이콘" id=aa style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','show','Layer2','','hide','layer3','','hide');trans('aa','마우스오버시 변경될 메뉴아이콘');" onMouseOut="trans('aa','마우스아웃시 보일 메뉴아이콘');" border=0 width="120" height="20" vspace="0" hspace="0">
* 중요포인트: 레이어의 갯수만큼의 명령어가 지정되어야합니다. 안그러면 에러발생
명령어입력시 id= <= 이부분은 절대 중복안되게 bb, cc등으로 지정바람, 각각의 명령어마다 3번입니다.
Show_Hide('Layer1','','show','Layer2','','hide','layer3','','hide') show/hide는 원하는 대로 변경가능..