웹마스터 팁
셀렉트 메뉴를 통해 갤러리 만들기
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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 셀렉트 메뉴를 통해 갤러리 만들기 | 한현종 | 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 |