웹마스터 팁
깔끔한 이미지 펼침박스
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
감사합니다. 베리 떙스...
