웹마스터 팁

이전에 올라온 많은 함수들을 봤는데요
대부분 작은 이미지를 클릭하면 큰이미지가 뜨게 하는 기능으로 사용하는거 같습니다.
대부분의 함수중에서 이미지가 아직 로드되지 않은채로 이미지의 크기를 가져오는 코드들이 있는데요
이런경우 첫번째 이미지가 열릴때는 크기가 0, 0 으로 이미지가 안나오는 경우가 생깁니다.
그래서 보안한 함수입니다.

실행되는 브라우저 버전은 잘몰르겠네요.. 아신는분 댓글 남겨주시면 감사하겠습니다.

이미지 크기를 가져오기위해 사용한 방법은
먼저 새창을 15 X 15 사이즈로 열고 출력할 해당이미지의 readyState 가 complete 될때까지
기다린후 새창을 다시 조정하는 방법을 사용했습니다.

readyState 는 해당 출력될 Object 의 상태가 읽어오는 중인지 모두 읽었는지 취소되었는지 등을 알수있는
프로퍼티입니다.

[사용방법]
먼저 아래 소스코드를 <head>~<head> 사이에 넣어주시구요. 사실 암대나 넣어두 상관없습니다.
그리고 img태그의 경우

<img src="abcdefg.gif" onclick="OpenImage(this.src)"> 라고 해주시면
abcdefg.gif 파일이 새창으로 열립니다.

일반 링크의 경우

<a href="#" onclick="OpenImage('새창으로 띄울 이미지의 주소')">크게보기</a>

다음 처럼 사용하시면 됩니다.

[예제]
http://goweb.netcci.org/bbs/zboard.php?id=photo

[소스코드]
========================================================================================
<script language='javascript' type='text/javascript'>
<!--
/***********************************
/ 이미지 사이즈에 맞게 새창띄우기
/***********************************/
function OpenImage(s){
        //
        // 변수 정의
        //
        srcImg = new Image();
        clientWidth = screen.width;
        clientHeight = screen.height;
        srcImg.src = s;
  //
  // 열려는 파일을 이름
  //
        var srcFileName = srcImg.src.substr(srcImg.src.lastIndexOf("/")+1, srcImg.src.length);
        //
        // 새창 띄우고 이미지 삽입
        //
        win = window.open("","","width=15,height=15,scrollbars=no,resizable=no,left="+(clientWidth/2-15)+",top="+(clientHeight/2-15)+"");
        win.document.writeln("<html>");
        win.document.writeln("<head>");
        win.document.writeln("<title>"+document.title+" ["+srcFileName+"]</title>");
        win.document.writeln("</head>");
        win.document.writeln("<body style='margin:0px;' bgcolor='#333333'>");
        win.document.writeln("<table border='0' cellpadding='0' cellspacing='0' style='cursor:hand' onclick='self.close()'>");
        win.document.writeln(" <tr>");
        win.document.writeln("  <td align='center'><img src="+s+" name='winImg' style='cursor:hand' onclick='self.close()' alt='클릭하면 사라집니다'></td>");
        win.document.writeln(" </tr>");
        win.document.writeln("</table>");
        win.document.writeln("</body>");
        win.document.writeln("</html>");

        srcImg = win.document.winImg;
        //
        // 이미지가 모두 로딩될때까지 기다림
        //
        while(true)
                if(srcImg.readyState == "complete")
                        break;
        
        //
        // 새창의 크기 설정
        //
        var winWidth = srcImg.width+10;
        var winHeight = srcImg.height+29;
        //
        // 새창이 띄워질 위치 설정
        //
        var left = (clientWidth/2)-(srcImg.width/2);
        var top = (clientHeight/2)-(srcImg.height/2);
        //
        // 이미지의 크기 overflow 확인후 새창의 크기와 위치 재설정
        //
        if(clientWidth <= srcImg.width){
                winWidth = clientWidth;
                left = 0;
                win.document.body.scroll = "auto";
        }
        if(clientHeight <= srcImg.height){
                winHeight = clientHeight-30;
                top = 0;
                win.document.body.scroll = "auto";
        }
        //
        // 이미지로딩이 끝났음으로 이미지의 크기를 사용할수 있다.
        // 해당 이미지의 사이즈에 맞게 윈도우를 재설정한다.
        win.moveTo(left, top);
        win.resizeTo(winWidth, winHeight);
}
//-->
</script>
제목 글쓴이 날짜
셀렉트 메뉴를 통해 갤러리 만들기 한현종 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] file zEn 2004.06.28
[추천] 세로형 배너 슬라이드 [4] ⓣinⓣin™ 2004.06.24
볼륨값이 얼마나 될까? [5] PHASE 2004.06.16
[추천] 가로형 배너 슬라이드 [7] file ⓣinⓣin™ 2004.06.10
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] ∑Ztxy 2004.06.05
지바 애플 아날로그 시계 소스입니다... [4] 한성민 2004.06.02