웹마스터 팁

  2. Support
  3. 웹마스터 팁

개판 오분전 - 이미지 뷰에 관한 한가지 힌트

2003.10.11 15:17

미친개


미리 보기 : http://allzza.net/aaaa/temp/img_view.html




img 태그로 웹문서에 이미지를 넣어주었을때 자바스크립트로 그 그림의 너비와 높이를
알수는 있지만 이렇게 알수 있는 값은 원래 이미지의 크기가 아니고 웹문서에 삽입된
크기에 불과하다.
다시 말 해서 크기 400 x 300 의 이미지를 다음처럼 넣어주면.....

<img src=어쩌구저쭈구.jpg width=100 height=80>

자바스크립트로 알수 있는 이미지의 크기는 400 x 300 이 아니고 100 x 80 이다.

그래서......
작은 이미지를 클릭했을때 원래그림 크기의 창으로 띄울땐 좀 변칙적인 방법을 써야 한다.

1. window.open 함수를 url 없이 변수를 써서 사용한다.
2. 이렇게 열린 window 에 window.변수.document.write() 함수를 이용해서
    자바스크립트와 img 태그를 뿌려준다.
3. 이때 뿌려지는 자바스크립트는 img 태그에 써준 그림 주소의 원래 크기를 알수 있다.
   (왜냐면 뿌려지는 img 태그에 width=쫑알쫑알, height=지껄지껄 이라는 부분이 없어
    원래 크기의 이미지로 그림이 보여지기 때문이다)
4. window.resizeTo() 함수를 이용해서 얻어진 그림 크기만큼 창의 크기를 줄인다.
5. window.moveTo() 함수를 써서
    screen.availWidth 와 screen.availHeight 속성과 그림의 크기를 적당히 가공하여
    이 창을 모니터 한가운데로 이동 시킨다.
    screen.availWidth 속성은 사용자의 모니터 가로크기를 알수 있는 속성이고
    screen............속성은 .........................................이다.
    그러므로 그림창을 한가운데로 옮기려면
    (모니터 가로크기 - 그림가로크기) / 2 를 x 좌표로 삼고
    (모니터 세로크기 - 그림세로크기) / 2 를 y 좌표로 삼아
    그림창을 옮기면 될것이다.
6. 고려해야 할 몇몇가지는 새창으로 뜨는 그림창의 body 태그에 가장자리 속성과 스크롤 여부를
   써줘야 그림창이 보기 좋을 것이고 가장자리값을 정해주는것도 한 방법이다.

추가) 그림창을 보통의 팝업 창처럼 열 경우 그림의 크기보다 약간 더 큰 창을 열어야
      그림이 잘리지 않고 다 보이겠으나
      그림창을 창틀없는 윈도우로 연다면(fullscreen) 이런 고려는 필요없겠다.
      하나더.
      그림창에 뿌려지는 img 태그에 그림을 클릭하면 그림창이 닫히는 스크립트를 추가하면 편할것이다.
      기분인데 하나 더.
      이러한 방식으로 스크립트를 포함한 문자열을 뿌려줄 경우 그냥 script 태그를 통째로 쓰면
      에러 난다. 반드시 <scr + ipt> 또는 </scri + pt> 이런 식으로 나누어 쓰도록 한다.
      이왕 주는김에 왕창 더.
      스크립트에서 한 명령이나 단위가 끝날때 세미콜론(;)을 적어준다면 줄바꿈은 필요가 없지만
      그냥 줄바꿈(n) 을 써주었다. 이게 세계 평화를 위한 내 작은 몸짓이다.
      
      아래 _innerhtml 의 변수가 이해가 안가면 그림창이 떴을때 키보드의 메뉴키를 눌러서 소스보기 하면
      아래 정의된 변수 innerhtml 변수가 이해가 갈것이다.


<script>
function my_win(img_url) {
       _innerhtml = "<title>그림 보기</title>n<scr"
           + "ipt>nfunction res()  {n"
           + "win_height = document.images.maddog.clientHeight;n"     //-- 3항의 그림 세로크기
           + "win_width = document.images.maddog.clientWidth;n"       //-- 3항의 그림 가로크기
           + "window.self.resizeTo(win_width,win_height);n"           //-- 4항
           + "window.self.moveTo((screen.availWidth - win_width)/2, (screen.availHeight - win_height)/2);n}n</scr"  //-- 5항
           + "ipt>n"                    
           + "<body style="border:1 solid black" scroll=no topmargin=0 leftmargin=0>n"       //-- 6항
           + "<img border=0 src=" + img_url + " name=maddog onload='res();' alt='클릭하면 창이 닫힐지도 모릅니다'+ ' onclick='window.close()'>n"

       var imgwin = window.open("",'_new','fullscreen');  //-- 위에 1항. 여기선 fullscreen 옵션으로 창을 열었다.
       imgwin.focus();
       imgwin.document.write(_innerhtml);                 //-- 위에 2항.
       }
</script>
<img src=http://is.nate.com/16991/360764_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>
<img src=http://is.nate.com/16991/353338_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>
<img src=http://is.nate.com/16991/353336_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>
<img src=http://is.nate.com/16991/353335_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1><br>
<img src=http://is.nate.com/16991/353334_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>
<img src=http://is.nate.com/16991/353333_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>
<img src=http://is.nate.com/16991/353332_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>
<img src=http://is.nate.com/16991/353331_2.jpg onclick="javascript:my_win(this.src)" width=100 height=80 border=1>


이 게시물을
수정 삭제
좋아요
목록
태그 쓰기