웹마스터 팁
깔끔한 이미지 펼침박스
2006.07.11 15:32
예제 : http://www.yoonmi.net/zboard/study/study210.htm
너무나 예쁘죠~? 저도 보고 깜짝 놀랐습니다.
이제 무식하게 생긴 펼침 박스에서벗어나고! 예쁘게 변경해보도록 합시다!
아래 소스들을 잘 수정해주셔야하는데요. 이소스는 다른 소스와 달리 자바스크립트 소스 파일이
첨가 되어있으니 이 소스를 필히 다운받으셔서 경로를 수정해서 사용하셔야합니다.
우선 아래에 다운받기 버튼을 누르고 소스를 다운받으셔서 적절한 공간에 저장을 해놓으세요.
물론 나중에 웹상에 올리실때는 해당 *.js 파일도 경로에 맞춰 올리셔야 합니다.
잘 모르시겠으면 아쉽지만 살짝 포기하시는것도 센스!
다운받기 : http://www.yoonmi.net/zboard/study/java/js5-77-selectmenu.js
(다른이름으로 저장하세요)
물론 여러분 다운받으실때 소스가 그냥 보인다 하실 경우엔 오른쪽 마우스 버튼을 클릭하시고 다른이름으로 저장하시면 간편합니다.^^ 잊지마세요!
한가지더 저장하여야할 그림 파일이 있습니다. (오른쪽 마우스버튼눌러 저장!)
이 그림 파일 명을 바꾸시면 안됩니다.
그림 파일은 저장하실때 적용할 html 파일과 동일한 경로에 넣어주세요.
그림파일 주소 : http://www.yoonmi.net/zboard/study/java/js5-77-down_arrow.gif
자, 이제는 펼침박스를 넣을 html 파일을 수정해 봅시다! 아래를 참고하세요!
====================================================================================
<head> 와 </head> 사이에 소스를 삽입하세요.
====================================================================================
<script src="java/js5-77-selectmenu.js"></script>
<div id="sl_Div" style="border-style:none;position:absolute;left:0px;top:0px;z-index:1;visibility:hidden;color:eeeeee;"></div>
====================================================================================
<body> </body> 사이에 소스를 삽입하세요.
====================================================================================
<table cellpadding=0 cellspacing=0 width=165 border=0 align="center">
<tr>
<td style="padding-left:10px;"> <table cellpadding=0 cellspacing=1 bgcolor="d4d4d4">
<tr>
<td bgcolor="FFFFFF" style="padding:1px;"> <script>
SelectList('<select name="Hphone1" style=width:149px;>' +
' <option value="" selected> ----- 윤미쩜넷 ---- </option>' +
' <option value="http://yoonmi.net">자바스크립트 </option>' +
' <option value="http://yoonmi.net">동영상편집강좌 </option>' +
' <option value="http://yoonmi.net">계정DB관리 </option>' +
' <option value="http://yoonmi.net">메인페이지</option>' +
' <option value="http://yoonmi.net">자료실</option>' +
' <option value="http://yoonmi.net">게시판</option>' +
'</select>', 'FFFFFF', '1');
</script> </td>
</tr>
</table></td>
</tr>
</table>
====================================================================================
★ 소스 수정하기 ★
*.JS 파일 경로 정하기
가장 중요합니다. ㅜㅜ 이부분을 헷갈리시고 주소를 잘 못 정하셔서 낭패보시는분 많습니다. 경로 지정을 잘못하신 분은 자바스크립트 오류가 납니다. 오류가 날 뿐만 아니라 제대로 시행 되지 않습니다. 제가 몇 번이고 이 소스들로 페이지를 만들었지만 경로만 잘 지정하면 90퍼센트 먹고 들어갑니다. 오류난다고 질문 게시판에 쓰시는 분들 보면 99.9999999999 퍼센트 경로지정을 잘못하거나 js 파일을 다운받지 않아서 이니 몇 번이고 100번이고 확인해보시고 의심나는 부분도 체크하셔서 경로를 필시 필히 마춰주세요 ^^*
펼침박스 메뉴 추가 및 수정하기
이거야 모시면서 하면 쉽겠죠~? 제가 진한 글씨로 표시한 것은 메뉴 이름.
파산색 글씨의 주소는 메뉴 선택시 이동될 웹페이지 주소입니다.
너무나 예쁘죠~? 저도 보고 깜짝 놀랐습니다.
이제 무식하게 생긴 펼침 박스에서벗어나고! 예쁘게 변경해보도록 합시다!
아래 소스들을 잘 수정해주셔야하는데요. 이소스는 다른 소스와 달리 자바스크립트 소스 파일이
첨가 되어있으니 이 소스를 필히 다운받으셔서 경로를 수정해서 사용하셔야합니다.
우선 아래에 다운받기 버튼을 누르고 소스를 다운받으셔서 적절한 공간에 저장을 해놓으세요.
물론 나중에 웹상에 올리실때는 해당 *.js 파일도 경로에 맞춰 올리셔야 합니다.
잘 모르시겠으면 아쉽지만 살짝 포기하시는것도 센스!
다운받기 : http://www.yoonmi.net/zboard/study/java/js5-77-selectmenu.js
(다른이름으로 저장하세요)
물론 여러분 다운받으실때 소스가 그냥 보인다 하실 경우엔 오른쪽 마우스 버튼을 클릭하시고 다른이름으로 저장하시면 간편합니다.^^ 잊지마세요!
한가지더 저장하여야할 그림 파일이 있습니다. (오른쪽 마우스버튼눌러 저장!)
이 그림 파일 명을 바꾸시면 안됩니다.
그림 파일은 저장하실때 적용할 html 파일과 동일한 경로에 넣어주세요.
그림파일 주소 : http://www.yoonmi.net/zboard/study/java/js5-77-down_arrow.gif
자, 이제는 펼침박스를 넣을 html 파일을 수정해 봅시다! 아래를 참고하세요!
====================================================================================
<head> 와 </head> 사이에 소스를 삽입하세요.
====================================================================================
<script src="java/js5-77-selectmenu.js"></script>
<div id="sl_Div" style="border-style:none;position:absolute;left:0px;top:0px;z-index:1;visibility:hidden;color:eeeeee;"></div>
====================================================================================
<body> </body> 사이에 소스를 삽입하세요.
====================================================================================
<table cellpadding=0 cellspacing=0 width=165 border=0 align="center">
<tr>
<td style="padding-left:10px;"> <table cellpadding=0 cellspacing=1 bgcolor="d4d4d4">
<tr>
<td bgcolor="FFFFFF" style="padding:1px;"> <script>
SelectList('<select name="Hphone1" style=width:149px;>' +
' <option value="" selected> ----- 윤미쩜넷 ---- </option>' +
' <option value="http://yoonmi.net">자바스크립트 </option>' +
' <option value="http://yoonmi.net">동영상편집강좌 </option>' +
' <option value="http://yoonmi.net">계정DB관리 </option>' +
' <option value="http://yoonmi.net">메인페이지</option>' +
' <option value="http://yoonmi.net">자료실</option>' +
' <option value="http://yoonmi.net">게시판</option>' +
'</select>', 'FFFFFF', '1');
</script> </td>
</tr>
</table></td>
</tr>
</table>
====================================================================================
★ 소스 수정하기 ★
*.JS 파일 경로 정하기
가장 중요합니다. ㅜㅜ 이부분을 헷갈리시고 주소를 잘 못 정하셔서 낭패보시는분 많습니다. 경로 지정을 잘못하신 분은 자바스크립트 오류가 납니다. 오류가 날 뿐만 아니라 제대로 시행 되지 않습니다. 제가 몇 번이고 이 소스들로 페이지를 만들었지만 경로만 잘 지정하면 90퍼센트 먹고 들어갑니다. 오류난다고 질문 게시판에 쓰시는 분들 보면 99.9999999999 퍼센트 경로지정을 잘못하거나 js 파일을 다운받지 않아서 이니 몇 번이고 100번이고 확인해보시고 의심나는 부분도 체크하셔서 경로를 필시 필히 마춰주세요 ^^*
펼침박스 메뉴 추가 및 수정하기
이거야 모시면서 하면 쉽겠죠~? 제가 진한 글씨로 표시한 것은 메뉴 이름.
파산색 글씨의 주소는 메뉴 선택시 이동될 웹페이지 주소입니다.
댓글 2
-
이진수
2006.10.02 10:33
감사합니다 유용하게 사용했네요 ^^ -
킁킁멀더
2007.10.10 17:33
감사합니다. 베리 떙스...
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 새로운 뉴스티커 [1] | 아렌티 | 2006.04.25 |
| [이 컨트롤을 활성화하고..] 해결하기 [2] | 모그422 | 2006.04.29 |
| 플래시 영역에 박스가 생기는것 [4] | 로그인 | 2006.05.03 |
| 웹FTP 적용하기 - 꽁수 [4] | whenji | 2006.05.02 |
| 홈페이지 하단 링크주소 없에는 소스 2 [4] | 인터니즈 | 2006.04.27 |
| 홈페이지 하단 링크주소 없에는 소스 [6] | 인테리어뱅크 | 2006.04.10 |
| 내 홈페이지에 유명사이트 검색엔진을 달자...(네이버,다음,야후 등등) [3] | 트래비스 | 2006.05.10 |
| 익스플러로 플래시 영역 박스 생김과 이 컨트롤을 활성화.. [14] | 도토리맘 | 2006.05.15 |
| [소스] 개발자,디자이너 전용 통합검색 스크립트 [1] | 김성대 | 2006.05.19 |
| 부모창과 함께 닫히는 팝업창(IE, FF) | 행복한고니 | 2006.07.06 |
| 깔끔한 이미지 펼침박스 [2] | ▩윤미 | 2006.07.11 |
| 환상적인 이미지 갤러리 (4차원세계에 빠져보세요) [5] | ▩윤미 | 2006.07.11 |
| 상단 타이틀바 흐르는 텍스트 | 왜,그러지 | 2006.07.14 |
| 위에서 아래로 좌에서 우로... [1] | 왜,그러지 | 2006.07.14 |
| 날라서 붙는 텍스트 [1] | 왜,그러지 | 2006.07.17 |
| 자바스크립트로 만든 테트리스 일명 자트리스 ^^;; [12] | beMax | 2006.07.27 |
| 배경색을 마우스로 크릭하여 지정하여 준다. | 왜,그러지 | 2006.07.27 |
| 로또 번호 추출기 [3] | 왜,그러지 | 2006.07.27 |
| 텍스트 선택하기 | 행복한고니 | 2006.09.06 |
| 로또 번호 생성기 허접..ㅋㅋ [5] | 삐따기 | 2006.10.04 |