|
강좌 전 태오의 잡담>
이 강좌는 Danny(전성대) 님께서 제공하는 유용한 팁들의 퍼레이드 랍니다. ^^
전성대님의 메일주소는 junsd@korea.com 이니까요.
강좌와 관련하여 추가적으로 궁금한 부분이 있거나 하시면 메일로 문의하세요 ^^
혹은, 전성대님의 사이트인 http://sanso.pe.kr 을 이용하셔도 된답니다. ^^
안녕하세요. 대니입니다.
오늘은 이미지 크기대로 팝업창 자동조절하여 띄워주는 방법을 설명하겠습니다.
이 팁은 사진 자료실이나 쇼핑몰에서
이미지 상세보기에 자주 사용되는 방법이 되겠군요.
먼저 사용자 정의 함수를 하나 만들어보겠습니다.
이는
LoadPicture 함수를 이용하여 이미지를 읽어들인 후에 가로와 세로사이즈를 리턴해주는 함수입니다.
Sub GetImageSize(ByVal f, ByRef x, ByRef y)
Set p =
LoadPicture(f)
x =
CLng(CDbl(p.Width) * 24 / 635) ' CLng 의 라운드 오프의 기능을 이용하고 있다.
y =
CLng(CDbl(p.Height) * 24 / 635) ' CLng 의 라운드 오프의 기능을 이용하고 있다.
Set p = Nothing
End Sub
|
페이지 상단에 이렇게 코드를 입력합니다.
그리고
이제 가로, 세로 사이즈를 얻으려면 함수 호출을 해봐야 겠군요.
|
GetImageSize "E:\wwwroot\image\"&big_image, x, y
|
big_image 변수에는 이미지 이름이 들어 있겠지요^^;
인자는 3개인데 첫번 째부터 설명드리면 [절대경로값],[가로사이즈 리턴변수],[세로사이즈 리턴변수] 를 입력해 주시면
되겠습니다. (참고로 절대 경로값을 입력해야 하며 "./image" 형태로 상대 경로값을 입력하게되면
LoadPicture(f) 에서 이미지를 로드할 수가 없답니다. 절대 경로값은 예제처럼 E:\wwwroot.......
이렇게 써 내려가도 좋으나 server.MapPath("/") 함수를 이용하여 출력하여도 된답니다.
server.MapPath 함수는 현재 asp페이지의 절대경로값을 출력해 주기 때문이지요.
첫번째 인자
절대경로 값을 server.MapPath("/")&"\image\"&big_image 이렇게 입력하셔도 되겠습니다. asp 페이지가
존재하는 디렉토리의 절대 경로를 반환하게 되므로 response.write server.MapPath("/") 이렇게
화면에 출력후에 조합하여 절대경로를 만들어 보신후에 사용하세요.
자~ 이렇게 호출하였습니다.
그럼 이제 x 와 y 의 변수에는 가로사이즈와 세로 사이즈 값이 들어있겠군요.
이제 자바스크립트를 이용하여 팝업창을 띄워보도록 하겠습니다. <head></head> 사이에다가 자바스크립트 코드(팝업창을 띄워야죠^^;) 를 입력해보겠습니다.
<script language="JavaScript">
function winopen(img_view,x,y)
{
var img_view = img_view;
var x = x;
var y = y;
window.open(img_view,
"image", "width="+ x +", height="+ y +", top=0, left=0,
scrollbars=0, resizable=1, toolbar=0, menubar= 0,
location=0, directories=0, status=0");
}
</script>
|
winopen 이라는
자바스크립트 사용자 정의 함수를 만들어 보았습니다.
첫번째 인자부터 설명을 드리면 [현재 페이지에서 상대경로 포함한 이미지이름],[가로사이즈],[세로사이즈] 가 되겠습니다.
다른 변수가 필요하시면 나름대로 변경하신후에 사용하세요^^;
그리고, 이 이벤트를 호출하기 위한 코드를 적어보겠습니다.
<a
href="javascript:winopen('./image/<%=big_image%>','<%=x%>','<%=y%>')">
[이건 이미지]</a>
|
이렇게 해서 asp를 이용하여 가로와 세로 사이즈를 얻은후에 자바 스크립트로
팝업을
띄울때 window.open 함수를 이용하여 사이즈를 반영하여 창을 띄웠습니다. 내용을 길게 적긴 했으나 실제 적용할때 코드는 얼마
되지 않습니다.
위에서부터 정리한 코드를 한꺼번에 소스코드로 종합해보면 아래와 같습니다.
|
[조건]
big_image = "이미지이름 값"
이미지는 asp페이지가 존재하는 디렉토리 아래에 image 란 폴더 안에
실제 이미지가 있다.
|
--코드시작--
<html>
<head>
<title>이미지 크기로 새창띄우기</title>
<script language="JavaScript">
function winopen(img_view,x,y){
var img_view = img_view;
var x = x;
var y = y;
window.open(img_view,
"image", "width="+ x +", height="+ y +", top=0, left=0,
scrollbars= 0, resizable=1, toolbar=0, menubar= 0,
location=0, directories=0, status=0");
}
</script>
</head>
<body>
<%
Sub GetImageSize(ByVal f, ByRef x, ByRef y)
Set p = LoadPicture(f)
x = CLng(CDbl(p.Width) * 24 / 635) ' CLng 의 라운드 오프의 기능을 이용하고 있다.
y = CLng(CDbl(p.Height) * 24 / 635) ' CLng 의 라운드 오프의 기능을 이용하고 있다.
Set p = Nothing
End Sub
GetImageSize server.MapPath("/")&"\image\"&big_image, x, y
%>
<a
href="javascript:winopen('./image/<%=big_image%>','<%=x%>','<%=y%>')">
[큰 이미지 보기]</a>
</body>
</html>
--코드 끝--
|
생각보다 몇줄 되지 않는데 설명을 장황하게 한것 같습니다.
이상. 위에 설명드린 내용은 asp를 이용하여 사이즈를 얻어내는 방법이었습니다.
대니는 다음에는 더 알찬 팁을 가지고 컴백하겠습니다.^^
강좌 내용에 의문이 있거나, 궁금한 사항이 있으신 분은
전성대님의 사이트인  http://sanso.pe.kr 을 이용해 보세요 ^^
모두 행복한 하루되세요^^
 강좌 목록으로..
|
강좌 최초 작성일 : 2003년 07월 25일