웹마스터 팁
레이어를 클릭해서 보이거나 사라지게 하기
2004.08.18 00:52
※ 레이어를 홈피에 적용시킬려고 공부하다가 알아낸 겁니다. ※
제로보드사이트에서 검색해서 공부중에 발견한 것이죠 ^^
그냥 응용한거라 보시면 될 듯 합니다.
☞ <head></head> 사이에 아래 스크립트를 넣으세요 ☜
<script language="javascript">
<!--
function show_hide_layer(lname)
{
if (lname.style.visibility == 'hidden') lname.style.visibility = 'visible';
else if (lname.style.visibility == 'visible') lname.style.visibility = 'hidden';
}
-->
</script>
☞ 제가 사용한 방법은 글씨를 클릭하면 원하는 레이어가 보이거나 사라지게 했습니다 ☜
☞ 아래는 본문에 들어간 부분 입니다. ☜
<font color="#66ccb8" size="2" style="line-height:-5pt;margin-left:10px;text-decoration:none;">
<b STYLE='CURSOR:HAND' OnClick="show_layer(document.getElementById('layer6'));" ONFOCUS='this.blur()' TITLE="NovaHero 음악 듣기~♬">
<strong>음악 듣기</strong>
</b></font>
<div id="layer6" style="position:absolute; left:0px; top:383px; z-index:1; visibility:hidden;">
<table background="./bg.gif" width="1014" height="30" leftmargin="0" topmargin="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<TD height="30" width="1014">
레이어에 보일 것을 여기에 넣으세요. img, iframe, 글씨.... 등등....
</TD>
</tr>
</table>
☞ 저 처럼 모르셔서 공부하느라 시간 너무 뺏길 초보분들에게 도움이 되었으면 합니다 ☜
OnClick="show_layer(document.getElementById('layer6'));"
부분과
<div id="layer6" style="position:absolute; left:0px; top:383px; z-index:1; visibility:hidden;">
부분을 보시고 생각해보시면 어떻게 적용되는지 아실겁니다.
액션은 OnClick 말고 다른거 사용하는 방법도 있겠구요.
여러가지로 다양하게 원하시는대로 적용할 수 있습니다.
저역시 응용해서 올린거구요 ^^;
제로보드사이트에서 검색해서 공부중에 발견한 것이죠 ^^
그냥 응용한거라 보시면 될 듯 합니다.
☞ <head></head> 사이에 아래 스크립트를 넣으세요 ☜
<script language="javascript">
<!--
function show_hide_layer(lname)
{
if (lname.style.visibility == 'hidden') lname.style.visibility = 'visible';
else if (lname.style.visibility == 'visible') lname.style.visibility = 'hidden';
}
-->
</script>
☞ 제가 사용한 방법은 글씨를 클릭하면 원하는 레이어가 보이거나 사라지게 했습니다 ☜
☞ 아래는 본문에 들어간 부분 입니다. ☜
<font color="#66ccb8" size="2" style="line-height:-5pt;margin-left:10px;text-decoration:none;">
<b STYLE='CURSOR:HAND' OnClick="show_layer(document.getElementById('layer6'));" ONFOCUS='this.blur()' TITLE="NovaHero 음악 듣기~♬">
<strong>음악 듣기</strong>
</b></font>
<div id="layer6" style="position:absolute; left:0px; top:383px; z-index:1; visibility:hidden;">
<table background="./bg.gif" width="1014" height="30" leftmargin="0" topmargin="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<TD height="30" width="1014">
레이어에 보일 것을 여기에 넣으세요. img, iframe, 글씨.... 등등....
</TD>
</tr>
</table>
☞ 저 처럼 모르셔서 공부하느라 시간 너무 뺏길 초보분들에게 도움이 되었으면 합니다 ☜
OnClick="show_layer(document.getElementById('layer6'));"
부분과
<div id="layer6" style="position:absolute; left:0px; top:383px; z-index:1; visibility:hidden;">
부분을 보시고 생각해보시면 어떻게 적용되는지 아실겁니다.
액션은 OnClick 말고 다른거 사용하는 방법도 있겠구요.
여러가지로 다양하게 원하시는대로 적용할 수 있습니다.
저역시 응용해서 올린거구요 ^^;
댓글 3
-
㉭ㅐ모
2004.08.20 14:49
홈페이지 방분하니 이상한 물건이 있던데요. PFVS 그걸 아직도 이용하시는 분이 계시다니요. 놀라울 따름입니다. 너무 대충 만든거라서 저도 거의 사용 않하는 상태 인데요. 오랜만에 보니 반갑네요. -
†천상의燦†
2004.08.21 21:43
^^ 제 홈페이지에서 그거 인기 좋습니다.
초등학생이 대부분입니다만... ^^ -
서준범
2007.02.10 12:09
사용하다보니 소스가 빠진게 있군요
OnClick="show_layer(document.getElementById('+ 'layer6'));"
를
OnClick="show_hide_layer(document.getElementById('layer6'));"
고쳐야 됩니다.
사용하시는 분들 주의하세요
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 셀렉트 메뉴를 통해 갤러리 만들기 | 한현종 | 2004.09.10 |
| 랜디님의 iframe 크기조절 소스응용-iframe 최저길이 지정하기 [1] | 김수형 | 2004.09.10 |
| 싸이처럼 테이블 안에서 버튼으로 이동/스크롤 하기 [5] | 제로스 | 2004.09.09 |
| 이미지 사이즈에 맞게 새창띄우기 [오류보완] 정확하게 안열리는 오류 [11] | beMax | 2004.08.18 |
| 레이어를 클릭해서 보이거나 사라지게 하기 [3] | †천상의燦† | 2004.08.18 |
| Javascipt로 구현한 MD5,MD4,SHA1 [10] | 장종석 | 2004.08.06 |
| 원하는 아이프레임부분을 리로드하자! [1] | †천상의燦† | 2004.08.02 |
| 문서에 따른 아이프레임 heigh(높이) 값 자동 조절 (수정본) [3] | 스토비━ⓒ | 2004.07.31 |
| 아이프레임으로 문서크기 자동조절하기(완벽판) [13] | 렌디 | 2004.07.21 |
| 웹 문서 암호화 스크립트 [1] | 미친개 | 2004.07.20 |
| 레이어 5 - 뽀나수 둘 [6] | 미친개 | 2004.07.07 |
| 레이어 4 - 뽀나수 하나 [1] | 미친개 | 2004.07.07 |
| 레이어 3 - 메뉴판때기. [1] | 미친개 | 2004.07.04 |
| 레이어 2 - 뷁뷁뷁뷁뷁봵 [7] | 미친개 | 2004.07.04 |
둥근테이블을 홈피에 짜고싶을때../
[12]
 | zEn | 2004.06.28 |
| [추천] 세로형 배너 슬라이드 [4] | ⓣinⓣin™ | 2004.06.24 |
| 볼륨값이 얼마나 될까? [5] | PHASE | 2004.06.16 |
|
[추천] 가로형 배너 슬라이드
[7]
| ⓣinⓣin™ | 2004.06.10 |
| [StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] | ∑Ztxy | 2004.06.05 |
| 지바 애플 아날로그 시계 소스입니다... [4] | 한성민 | 2004.06.02 |