웹마스터 팁
셀렉트 메뉴를 통해 갤러리 만들기
2004.09.10 19:15
한번 시도를 해 봤는데... 영 추리하네요..-_-;;
그냥 머 셀렉트 메뉴 사용법이랑.. 레이어 사용법.. 그리고 옆에 스크롤바도 바꾸는거도 있고
표를 이중으로 두게 하는 것도 있네요..
머 이것저것 짬뽕이네요..
참 그 사진의 끝부분 처리를 못하겠네여.. 이거 asp를 이용할려고 해도 문제가 생기고
자바스크립트만으로도 할려니 어렵고.. 글적.
참고 하실분들 계실지는 의문이네요..
<HTML>
<head>
<style type="text/css"> //스크롤바
<!--
body {
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color: navy;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-shadow-color: navy;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: navy;
background-color: transparent;
}
//이건 링크에 가보면 알겠지만 나중에 게시판 투명하게 할려고 쓴 부분임
table {background-color: transparents;} td { background-color: transparents;}
-->
</style>
</head>
<body link="blue" vlink="purple" alink="red">
<script>
<!--
//셀렉트에서 선택한 값을 폴더로 지정
function go(where){
n=1;
Paths = this.gal.galdb.options[this.gal.galdb.selectedIndex].value;
var filenum;
igallery.filters.blendTrans.apply(); //부드럽게 만드는것
igallery.src= "http://ciscoman.net/gallery/" + Paths + "/" +"0.jpg";
igallery.filters.blendTrans.play();
tempigallery.src= "http://ciscoman.net/gallery/" + Paths + ".jpg";
}
//next누르면 다음 사진 prev 누르면 이전 사진 (참고로 에러처리 전혀 안됨-_-;;)
function PrevNext(str){
if(str == "Next") {
igallery.filters.blendTrans.apply();
igallery.src= "http://ciscoman.net/gallery/" + Paths + "/" + n + ".jpg";
igallery.filters.blendTrans.play();
n++;
igallery.onerror= "http://ciscoman.net/gallery/" + Paths + "/" + n-1 + ".jpg";
}
if(str == "Prev" && n>0) {
n--;
igallery.filters.blendTrans.apply();
igallery.src= "http://ciscoman.net/gallery/" + Paths + "/" + n + ".jpg";
igallery.filters.blendTrans.play();
}
if(str == "error") {
n=0;
}
}
// -->
</script>
//우선은 전체적으로 테두리 깔아주는 부분
<table border=0 width=600><tr height=20 width=100%><td><div style='width:550px; height:440px;position:absolute;filter:alpha(opacity=70,finishopacity=0,style=0)'>
<img name="igalleryer" src="http://ciscoman.net/img/00000.gif" width="550" height="440"></div></td><td></td></tr>
//셀렉트 메뉴 만들고 값을 전 사진찍을 날로 입력했습니다. 그래야 폴더랑 연결하기 쉽기에..-_-;;
<tr><td width=10></td><td width=10></td><td>
<form name="gal"> <select name="galdb" onchange="go(this)" style="background-color:#808080; width=350; font-family:Tahoma; Font-size:8pt; color:#FFFFFF">
<option>카테고리를 선택해 주세요</option>
<option value="0528">(05.28)해운대 한국콘도.... 동문 첫 M.T</option>
<option value="0519">(05.19)학교 축제.. L.E.X.Y 사진뿐인듯-_-;;</option>
<option value="0505">(05.05)어린이날엔 어린이 대공원.. 대략 사람 구경만 한듯</option>
</select></form></td>
//버튼을 스타일 입혀서 만들어 봤음.. 디자인 감각은 제로인듯-_-;;
머 다 똑같은 스타일 복사하였는데.. 왜저리 길게 되는 이유는 모름.
버튼 들어가는 부분 그냥 하니 이상하게 줄이 안 맞아서리 레이어로 하니 만족할만함 (이유는 역시 모름)
<td width=200 valign=top><form name="gal2">
<div style='width=50;position:absolute;left=400;top=30'>
<input type="button" value="< Prev" onClick="PrevNext('Prev')" style="color:#2E4A4A; font-size:12px; font-family:tahoma; font-weight:bold; background-color:#E9F5F5; border:1 #A1A9A9 solid; width:60px;height:19px"
onmouseover="this.style.backgroundColor='#C0E8DB'; this.style.color='#EF315E'" onmouseout="this.style.backgroundColor='#E9F5F5'; this.style.color='#0E4433'">
</div><div style='width=50;position:absolute;left=470;top=30'>
<input type="button" value="Next >" onClick="PrevNext('Next')" style="color:#2E4A4A; font-size:12px; font-family:tahoma; font-weight:bold; background-color:#E9F5F5; border:1 #A1A9A9 solid; width:60px;height:19px"
onmouseover="this.style.backgroundColor='#C0E8DB'; this.style.color='#EF315E'" onmouseout="this.style.backgroundColor='#E9F5F5'; this.style.color='#0E4433'"></form></td>
//이제 사진 들어가는 부분.. 역시 레이어로 처리
<tr><td width=10></td><td colspan=3><div style='width:500px; height:400px; position:absolute; left:25px; top:60px;'>
<img name="igallery" src="best.jpg" onerror="PrevNext('error')" width="500" height="380"style="filter:blendTrans(duration=2)"></div></td></tr>
</table>
//이게 아마도 갤러리 테두리 이중으로 보이게 할려고 이렇게 해 놓은것 같네요..
<div style='width=50; height=50;position:absolute;left=560;top=250'>
<img name="tempigallery" src="0000.jpg"></div>
</body>
</html>
링크 : http://www.ciscoman.net
여기 들어가셔서 갤러리의 마이갤러리에 보면 있습니다. (태그가 안되는거였군요..)
전체적인 내용은 하나를 선택하면 그 선택값에 폴더를 지정해서 그 폴더의 사진 0.jpg를 보이게 합니다.
그리고 next 누르면 다음 사진... prev를 누르면 전에 사진... 머 이렇게...
사진은 폴더 하나 만들고 번호를 순서대로 부여해서 넣고 나서 이 소스에서 위에 셀렉트 메뉴 하나만
추가하니.. 사진 등록 가능하여 어렵지 않게 마이 갤러리 정도는 응용 될꺼라 믿고 있슴다. -_-;;
머 디카 매니아 한테는 유용할듯..
그냥 머 셀렉트 메뉴 사용법이랑.. 레이어 사용법.. 그리고 옆에 스크롤바도 바꾸는거도 있고
표를 이중으로 두게 하는 것도 있네요..
머 이것저것 짬뽕이네요..
참 그 사진의 끝부분 처리를 못하겠네여.. 이거 asp를 이용할려고 해도 문제가 생기고
자바스크립트만으로도 할려니 어렵고.. 글적.
참고 하실분들 계실지는 의문이네요..
<HTML>
<head>
<style type="text/css"> //스크롤바
<!--
body {
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color: navy;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-shadow-color: navy;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: navy;
background-color: transparent;
}
//이건 링크에 가보면 알겠지만 나중에 게시판 투명하게 할려고 쓴 부분임
table {background-color: transparents;} td { background-color: transparents;}
-->
</style>
</head>
<body link="blue" vlink="purple" alink="red">
<script>
<!--
//셀렉트에서 선택한 값을 폴더로 지정
function go(where){
n=1;
Paths = this.gal.galdb.options[this.gal.galdb.selectedIndex].value;
var filenum;
igallery.filters.blendTrans.apply(); //부드럽게 만드는것
igallery.src= "http://ciscoman.net/gallery/" + Paths + "/" +"0.jpg";
igallery.filters.blendTrans.play();
tempigallery.src= "http://ciscoman.net/gallery/" + Paths + ".jpg";
}
//next누르면 다음 사진 prev 누르면 이전 사진 (참고로 에러처리 전혀 안됨-_-;;)
function PrevNext(str){
if(str == "Next") {
igallery.filters.blendTrans.apply();
igallery.src= "http://ciscoman.net/gallery/" + Paths + "/" + n + ".jpg";
igallery.filters.blendTrans.play();
n++;
igallery.onerror= "http://ciscoman.net/gallery/" + Paths + "/" + n-1 + ".jpg";
}
if(str == "Prev" && n>0) {
n--;
igallery.filters.blendTrans.apply();
igallery.src= "http://ciscoman.net/gallery/" + Paths + "/" + n + ".jpg";
igallery.filters.blendTrans.play();
}
if(str == "error") {
n=0;
}
}
// -->
</script>
//우선은 전체적으로 테두리 깔아주는 부분
<table border=0 width=600><tr height=20 width=100%><td><div style='width:550px; height:440px;position:absolute;filter:alpha(opacity=70,finishopacity=0,style=0)'>
<img name="igalleryer" src="http://ciscoman.net/img/00000.gif" width="550" height="440"></div></td><td></td></tr>
//셀렉트 메뉴 만들고 값을 전 사진찍을 날로 입력했습니다. 그래야 폴더랑 연결하기 쉽기에..-_-;;
<tr><td width=10></td><td width=10></td><td>
<form name="gal"> <select name="galdb" onchange="go(this)" style="background-color:#808080; width=350; font-family:Tahoma; Font-size:8pt; color:#FFFFFF">
<option>카테고리를 선택해 주세요</option>
<option value="0528">(05.28)해운대 한국콘도.... 동문 첫 M.T</option>
<option value="0519">(05.19)학교 축제.. L.E.X.Y 사진뿐인듯-_-;;</option>
<option value="0505">(05.05)어린이날엔 어린이 대공원.. 대략 사람 구경만 한듯</option>
</select></form></td>
//버튼을 스타일 입혀서 만들어 봤음.. 디자인 감각은 제로인듯-_-;;
머 다 똑같은 스타일 복사하였는데.. 왜저리 길게 되는 이유는 모름.
버튼 들어가는 부분 그냥 하니 이상하게 줄이 안 맞아서리 레이어로 하니 만족할만함 (이유는 역시 모름)
<td width=200 valign=top><form name="gal2">
<div style='width=50;position:absolute;left=400;top=30'>
<input type="button" value="< Prev" onClick="PrevNext('Prev')" style="color:#2E4A4A; font-size:12px; font-family:tahoma; font-weight:bold; background-color:#E9F5F5; border:1 #A1A9A9 solid; width:60px;height:19px"
onmouseover="this.style.backgroundColor='#C0E8DB'; this.style.color='#EF315E'" onmouseout="this.style.backgroundColor='#E9F5F5'; this.style.color='#0E4433'">
</div><div style='width=50;position:absolute;left=470;top=30'>
<input type="button" value="Next >" onClick="PrevNext('Next')" style="color:#2E4A4A; font-size:12px; font-family:tahoma; font-weight:bold; background-color:#E9F5F5; border:1 #A1A9A9 solid; width:60px;height:19px"
onmouseover="this.style.backgroundColor='#C0E8DB'; this.style.color='#EF315E'" onmouseout="this.style.backgroundColor='#E9F5F5'; this.style.color='#0E4433'"></form></td>
//이제 사진 들어가는 부분.. 역시 레이어로 처리
<tr><td width=10></td><td colspan=3><div style='width:500px; height:400px; position:absolute; left:25px; top:60px;'>
<img name="igallery" src="best.jpg" onerror="PrevNext('error')" width="500" height="380"style="filter:blendTrans(duration=2)"></div></td></tr>
</table>
//이게 아마도 갤러리 테두리 이중으로 보이게 할려고 이렇게 해 놓은것 같네요..
<div style='width=50; height=50;position:absolute;left=560;top=250'>
<img name="tempigallery" src="0000.jpg"></div>
</body>
</html>
링크 : http://www.ciscoman.net
여기 들어가셔서 갤러리의 마이갤러리에 보면 있습니다. (태그가 안되는거였군요..)
전체적인 내용은 하나를 선택하면 그 선택값에 폴더를 지정해서 그 폴더의 사진 0.jpg를 보이게 합니다.
그리고 next 누르면 다음 사진... prev를 누르면 전에 사진... 머 이렇게...
사진은 폴더 하나 만들고 번호를 순서대로 부여해서 넣고 나서 이 소스에서 위에 셀렉트 메뉴 하나만
추가하니.. 사진 등록 가능하여 어렵지 않게 마이 갤러리 정도는 응용 될꺼라 믿고 있슴다. -_-;;
머 디카 매니아 한테는 유용할듯..
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| [초보] 확장자 체크하는 매우 간단한 소스; [4] | 에지 | 2003.09.29 |
인터넷 사이트 , MS 오피스로 관리하기 3 공시사항 나타내기
[5]
 | 한꼬마 | 2003.09.24 |
| Whois를 이용해서 접속자가 사용하는 ISP출력(한국통신,하나로,두루넷 등등) [6] | 김재경 | 2003.09.23 |
| 달력 만들기 [10] | TheMics | 2003.09.23 |
| php+mysql>>공지사항|일기장 프로그램 1장:DB구조,schema 파일로 테이블생성하기! [2] | 시루바 | 2003.09.23 |
|
인터넷 사이트, MS 오피스로 관리하기 2 공지사항
[4]
| 한꼬마 | 2003.09.23 |
|
인터넷 사이트 , MS 오피스로 관리하기
[3]
| 한꼬마 | 2003.09.22 |
| 임시적으로 php.ini 환경변수들 대처하기 [2] | impre | 2003.09.20 |
| 동적으로 Extensions(library) 로딩하기 | impre | 2003.09.20 |
| include 할시에 주의사항..(경로설정관련) [10] | 피너츠 | 2003.09.14 |
| 지정한만큼 암호화/해독 하기 [24] | 뒹굴리스트 | 2003.09.10 |
| 모든파일을 리스트로 만들기; [10] | 플로렐라 | 2003.09.10 |
| 군대간 친구 남은날짜 구하기 2(복무기간 단축에 따른 수정) [8] | 신민경 | 2003.09.02 |
| 자료실에 쓸만한 자료용량 환산 [7] | 한승진 | 2003.09.01 |
| php 랜덤 이미지 디렉토리 검색으로 편하게.. [3] | 꺼노 | 2003.08.28 |
| 웹디자이너와 프로그래머가 사이 좋게 코딩하는 방법 [50] | 마이템플릿 | 2003.08.13 |
| 개판 오분전 정규식(1) | 미친개 | 2003.08.07 |
| 개판 오분전 정규식(2) [5] | 미친개 | 2003.08.07 |
| 개판 오분전 정규식(3) [2] | 미친개 | 2003.08.07 |
| 개판 오분전 정규식(4) | 미친개 | 2003.08.07 |