웹마스터 팁
셀렉트 메뉴를 통해 갤러리 만들기
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를 누르면 전에 사진... 머 이렇게...
사진은 폴더 하나 만들고 번호를 순서대로 부여해서 넣고 나서 이 소스에서 위에 셀렉트 메뉴 하나만
추가하니.. 사진 등록 가능하여 어렵지 않게 마이 갤러리 정도는 응용 될꺼라 믿고 있슴다. -_-;;
머 디카 매니아 한테는 유용할듯..
