묻고답하기
[612번글 답변] 마우스 over시에 우측에 해당이미지 보여주기 스크립트
2002.08.05 02:47
위에 쓰인 페이지의 언어는 자바스크립트(JavaScript)입니다. 자바(Java)하고 혼동하지 마세요. 자바는 코딩된 소스가 컴파일된 거라서 자바스크립트와는 전혀 별개의 언어입니다. -_-;
그리고 위의 페이지에 보니 소스 쉽게 배껴 쓸수 있네요... 우선 나름대로 배껴서 적용해보시는게 빨리 배우는 지름길입니다.
나름대로 제가 소스 풀이한거 올리겠습니다.
첫번째 부분입니다. 이부분은 왼쪽 텍스트로 표시된 서브메뉴에 마우스 포인트가 올라가면 지정된 우측화면에 보이게 하는 스크립트 부분입니다.
변경하실부분은 없는것으로 생각됩니다. 그대로 복사해서 넣어보세요 ( 않되시면 문서의 HEAD부분에 넣어보세요)
<script language="javascript">
<!--
function show(id, able){
if(able=="show"){
able="visible";
eval("document.all"+id+".style.visibility='"+able+"'");
}
else{
able="hidden";
eval("document.all"+id+".style.visibility='"+able+"'");
}
}
//-->
</script>
두번째 부분입니다. 이부분은 텍스트로 표시된 서브메뉴 클릭시 이미지를 새창에서 볼수 있게하는 스크립트 부분입니다.
var openfile = "파일경로" <-- 3째줄
toolbar=no,location=no,directory=no,scrollbars=no,resizable=no,status=no,copyhistory=no,width=425,height=580" ); <--5째줄 마우스 클릭시 뜨는 이미지가 보여질 페이지의 옵션부분입니다. 스크롤이 생기게 할것인지 네비케이션메뉴는 생성할 것인지 페이지 크기는 어떠한지 .
여기서 수정할 부분은 몇개 없습니다. scrollbars=no 부분을 scrollbars=yes 부분으로 고치면 스크롤바가 생깁니다. 그리고 width와 height의 크기를 그림사이즈에 맞게 픽셀 크기로 수정해 주시면 됩니다.
아래 부분 복사해서, 수정하신후 위에 자바스크립의 아래부분에 넣으세요.
<SCRIPT LANGUAGE ="JavaScript">
function call_win(arg) {
var openfile = "http://my.dreamwiz.com/yangbh/manhwa/s_" + arg + ".html";
POP = window.open( openfile, "WIN_SUB", "menubar=no, toolbar=no,location=no,directory=no,scrollbars=no,resizable=no,status=no,copyhistory=no,width=425,height=580" );
POP.focus(); }
</SCRIPT>
마지막으로 님이 가르쳐준 사이트에서는 테이블을 이용하여 서브메뉴를 표시해두었습니다. 테이블이 없어도 상관없습니다만 위 사이트의 소스대로 테이블이 있는 상태에서 설명하겠습니다. 나름대로 님이 수정하세요.
아래 부분을 보시면 4번째줄
<div id="s_74" style="background-color:white; width:150px; height:500px; position:absolute; left:210px; top:40px; z-index:0; visibility:hidden; layer-background-color:white; " class="no">
위에서 background-color:white; width:150px; height:500px 이부분은 이미지의 배경부분 설정입니다.
설명하자면 배경부분은 흰색 가로크기는 150픽셀 세로크기는 500픽셀 입니다.
그리고 옆의 부분을 보시면 이미지가 웹페이지에서 보여질 위치를 정하는 소스부분이 있습니다.
position:absolute; left:210px; top:40px
설명하자면 이미지의 위치를 왼쪽에서 210픽셀 떨어진곳, 위에서 40픽셀 밑으로 한 지점에 이미지가 보이게 하라는 뜻입니다. 그리고 다음부분은 아무래도 레이어를 이용해서 이미지를 살짝 가리는 역활을 할것입니다.
마지막으로 수정해야 할부분은 당연히 이미지 삽입부분입니다. 6번째 줄은 보여질 이미지 경로를 적으시면 되구요.
<a href="javascript:call_win('74')"
onmouseover="show('['s_74']','show');window.status='연습중';" onmouseout="show('['s_74']','hidden')">가까이</a></font>
이 부분에서 첫번째의 win('74')" 부분과 '['s_74']' 이부분이 있습니다.
제가 생각하기에는 이미지의 경로가 http://my.dreamwiz.com/yangbh/manhwa/s_74.gif 입니다.
첫번째 부분은 이미지 번호인것 같고 2번째 부분은 아까전에 말한(2번째 설명중 자바스크립트 부분) 경로입력 뒷부분으로 생각됩니다.
<table border=0 CELLSPACING=0 CELLPADDING=0>
<tr>
<td width=100>
<div id="s_74" style="background-color:white; width:150px; height:500px; position:absolute; left:210px; top:40px; z-index:0; visibility:hidden; layer-background-color:white; " class="no">
<img src="http://my.dreamwiz.com/yangbh/manhwa/s_74.gif">
</div>
<FONT FACE="굴림체" SIZE="2" COLOR="#C0A067"><img src="http://my.dreamwiz.com/yangbh/icon/ball.gif">
<a href="javascript:call_win('74')"
onmouseover="show('['s_74']','show');window.status='연습중';" onmouseout="show('['s_74']','hidden')">가까이</a></font>
</td>
<td width=80><FONT FACE="굴림체" SIZE="2" COLOR="#184CAF">(2002/07/18)</font></td></tr>
</table>
제 설명이 대단히 부족할수도 있을 것입니다. 백번듣는것 보다 한번 보는게 낫고, 열번 보는것 보다 직접 한번 해보는게 더 낫겠죠?
<----!! 아래부분 부터 복사하세요 !!---->
<script language="javascript">
<!--
function show(id, able){
if(able=="show"){
able="visible";
eval("document.all"+id+".style.visibility='"+able+"'");
}
else{
able="hidden";
eval("document.all"+id+".style.visibility='"+able+"'");
}
}
//-->
</script>
<SCRIPT LANGUAGE ="JavaScript">
function call_win(arg) {
var openfile = "http://my.dreamwiz.com/yangbh/manhwa/s_" + arg + ".html";
POP = window.open( openfile, "WIN_SUB", "menubar=no, toolbar=no,location=no,directory=no,scrollbars=no,resizable=no,status=no,copyhistory=no,width=425,height=580" );
POP.focus(); }
</SCRIPT>
<table border=0 CELLSPACING=0 CELLPADDING=0>
<tr>
<td width=100>
<div id="s_74" style="background-color:white; width:150px; height:500px; position:absolute; left:210px; top:40px; z-index:0; visibility:hidden; layer-background-color:white; " class="no">
<img src="http://my.dreamwiz.com/yangbh/manhwa/s_74.gif">
</div>
<FONT FACE="굴림체" SIZE="2" COLOR="#C0A067"><img src="http://my.dreamwiz.com/yangbh/icon/ball.gif">
<a href="javascript:call_win('74')"
onmouseover="show('['s_74']','show');window.status='연습중';" onmouseout="show('['s_74']','hidden')">가까이</a></font>
</td>
<td width=80><FONT FACE="굴림체" SIZE="2" COLOR="#184CAF">(2002/07/18)</font></td></tr>
</table>
<----!! 위에부분까지 복사하세요 !!---->
위 소스를 htm,html 원하는 위치에 삽입해서 한번 수정해보시면 한번에 의문점이 풀릴것입니다.
설명이 부족했다면 죄송하구요. 나름대로 가장 쉽게 설명했습니다. 저도 자바스크립트 언어의 함수값은 거의 모릅니다 -_-;;
고수들도 그렇구요 -_-;; 대충보고 출력부분에 해당하는 부분을 알아먹는거죠... 많이 해보시면 되요....
그럼 이만 ... (--v
그리고 위의 페이지에 보니 소스 쉽게 배껴 쓸수 있네요... 우선 나름대로 배껴서 적용해보시는게 빨리 배우는 지름길입니다.
나름대로 제가 소스 풀이한거 올리겠습니다.
첫번째 부분입니다. 이부분은 왼쪽 텍스트로 표시된 서브메뉴에 마우스 포인트가 올라가면 지정된 우측화면에 보이게 하는 스크립트 부분입니다.
변경하실부분은 없는것으로 생각됩니다. 그대로 복사해서 넣어보세요 ( 않되시면 문서의 HEAD부분에 넣어보세요)
<script language="javascript">
<!--
function show(id, able){
if(able=="show"){
able="visible";
eval("document.all"+id+".style.visibility='"+able+"'");
}
else{
able="hidden";
eval("document.all"+id+".style.visibility='"+able+"'");
}
}
//-->
</script>
두번째 부분입니다. 이부분은 텍스트로 표시된 서브메뉴 클릭시 이미지를 새창에서 볼수 있게하는 스크립트 부분입니다.
var openfile = "파일경로" <-- 3째줄
toolbar=no,location=no,directory=no,scrollbars=no,resizable=no,status=no,copyhistory=no,width=425,height=580" ); <--5째줄 마우스 클릭시 뜨는 이미지가 보여질 페이지의 옵션부분입니다. 스크롤이 생기게 할것인지 네비케이션메뉴는 생성할 것인지 페이지 크기는 어떠한지 .
여기서 수정할 부분은 몇개 없습니다. scrollbars=no 부분을 scrollbars=yes 부분으로 고치면 스크롤바가 생깁니다. 그리고 width와 height의 크기를 그림사이즈에 맞게 픽셀 크기로 수정해 주시면 됩니다.
아래 부분 복사해서, 수정하신후 위에 자바스크립의 아래부분에 넣으세요.
<SCRIPT LANGUAGE ="JavaScript">
function call_win(arg) {
var openfile = "http://my.dreamwiz.com/yangbh/manhwa/s_" + arg + ".html";
POP = window.open( openfile, "WIN_SUB", "menubar=no, toolbar=no,location=no,directory=no,scrollbars=no,resizable=no,status=no,copyhistory=no,width=425,height=580" );
POP.focus(); }
</SCRIPT>
마지막으로 님이 가르쳐준 사이트에서는 테이블을 이용하여 서브메뉴를 표시해두었습니다. 테이블이 없어도 상관없습니다만 위 사이트의 소스대로 테이블이 있는 상태에서 설명하겠습니다. 나름대로 님이 수정하세요.
아래 부분을 보시면 4번째줄
<div id="s_74" style="background-color:white; width:150px; height:500px; position:absolute; left:210px; top:40px; z-index:0; visibility:hidden; layer-background-color:white; " class="no">
위에서 background-color:white; width:150px; height:500px 이부분은 이미지의 배경부분 설정입니다.
설명하자면 배경부분은 흰색 가로크기는 150픽셀 세로크기는 500픽셀 입니다.
그리고 옆의 부분을 보시면 이미지가 웹페이지에서 보여질 위치를 정하는 소스부분이 있습니다.
position:absolute; left:210px; top:40px
설명하자면 이미지의 위치를 왼쪽에서 210픽셀 떨어진곳, 위에서 40픽셀 밑으로 한 지점에 이미지가 보이게 하라는 뜻입니다. 그리고 다음부분은 아무래도 레이어를 이용해서 이미지를 살짝 가리는 역활을 할것입니다.
마지막으로 수정해야 할부분은 당연히 이미지 삽입부분입니다. 6번째 줄은 보여질 이미지 경로를 적으시면 되구요.
<a href="javascript:call_win('74')"
onmouseover="show('['s_74']','show');window.status='연습중';" onmouseout="show('['s_74']','hidden')">가까이</a></font>
이 부분에서 첫번째의 win('74')" 부분과 '['s_74']' 이부분이 있습니다.
제가 생각하기에는 이미지의 경로가 http://my.dreamwiz.com/yangbh/manhwa/s_74.gif 입니다.
첫번째 부분은 이미지 번호인것 같고 2번째 부분은 아까전에 말한(2번째 설명중 자바스크립트 부분) 경로입력 뒷부분으로 생각됩니다.
<table border=0 CELLSPACING=0 CELLPADDING=0>
<tr>
<td width=100>
<div id="s_74" style="background-color:white; width:150px; height:500px; position:absolute; left:210px; top:40px; z-index:0; visibility:hidden; layer-background-color:white; " class="no">
<img src="http://my.dreamwiz.com/yangbh/manhwa/s_74.gif">
</div>
<FONT FACE="굴림체" SIZE="2" COLOR="#C0A067"><img src="http://my.dreamwiz.com/yangbh/icon/ball.gif">
<a href="javascript:call_win('74')"
onmouseover="show('['s_74']','show');window.status='연습중';" onmouseout="show('['s_74']','hidden')">가까이</a></font>
</td>
<td width=80><FONT FACE="굴림체" SIZE="2" COLOR="#184CAF">(2002/07/18)</font></td></tr>
</table>
제 설명이 대단히 부족할수도 있을 것입니다. 백번듣는것 보다 한번 보는게 낫고, 열번 보는것 보다 직접 한번 해보는게 더 낫겠죠?
<----!! 아래부분 부터 복사하세요 !!---->
<script language="javascript">
<!--
function show(id, able){
if(able=="show"){
able="visible";
eval("document.all"+id+".style.visibility='"+able+"'");
}
else{
able="hidden";
eval("document.all"+id+".style.visibility='"+able+"'");
}
}
//-->
</script>
<SCRIPT LANGUAGE ="JavaScript">
function call_win(arg) {
var openfile = "http://my.dreamwiz.com/yangbh/manhwa/s_" + arg + ".html";
POP = window.open( openfile, "WIN_SUB", "menubar=no, toolbar=no,location=no,directory=no,scrollbars=no,resizable=no,status=no,copyhistory=no,width=425,height=580" );
POP.focus(); }
</SCRIPT>
<table border=0 CELLSPACING=0 CELLPADDING=0>
<tr>
<td width=100>
<div id="s_74" style="background-color:white; width:150px; height:500px; position:absolute; left:210px; top:40px; z-index:0; visibility:hidden; layer-background-color:white; " class="no">
<img src="http://my.dreamwiz.com/yangbh/manhwa/s_74.gif">
</div>
<FONT FACE="굴림체" SIZE="2" COLOR="#C0A067"><img src="http://my.dreamwiz.com/yangbh/icon/ball.gif">
<a href="javascript:call_win('74')"
onmouseover="show('['s_74']','show');window.status='연습중';" onmouseout="show('['s_74']','hidden')">가까이</a></font>
</td>
<td width=80><FONT FACE="굴림체" SIZE="2" COLOR="#184CAF">(2002/07/18)</font></td></tr>
</table>
<----!! 위에부분까지 복사하세요 !!---->
위 소스를 htm,html 원하는 위치에 삽입해서 한번 수정해보시면 한번에 의문점이 풀릴것입니다.
설명이 부족했다면 죄송하구요. 나름대로 가장 쉽게 설명했습니다. 저도 자바스크립트 언어의 함수값은 거의 모릅니다 -_-;;
고수들도 그렇구요 -_-;; 대충보고 출력부분에 해당하는 부분을 알아먹는거죠... 많이 해보시면 되요....
그럼 이만 ... (--v