이미지 자동 축소, 클릭시 원본크기 팝업 불가

leejin0 · Post by **leejin0** » 2004 11 06 01:39 16

function Rsize(img, ww, hh, aL){
        var tt = imgRsize(img, ww, hh);
        if(img.width > ww || img.height > hh){ // 가로나 세로크기가 제한크기보다 크면
            img.width = tt[0]; // 크기조정
            img.height = tt[1];
            img.alt = '클릭하시면 원본이미지를 보실수있습니다.';
            if(aL){ // 자동링크 on
                    img.onclick = function(){
                        wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                        wL = Math.ceil((screen.height - tt[3])/2.6);
                        mm = window.open("", 'viewOrig', 'width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                        var doc = mm.document;
                        doc.body.style.margin = 0; // 마진제거
                        doc.body.style.cursor = "hand";
                        var previewimg = doc.createElement("img");
                        previewimg.src = img.src;
                        doc.body.appendChild(previewimg);
                        doc.body.onmousedown = function(){ mm.close();}
                        doc.title = 'NUX';
                    }
                    img.style.cursor = "hand";
            }
        } else {
            img.onclick = function(){ alert("현재이미지가 원본 이미지입니다."); }
        }
}

분명히 이 코드에서 if(aL) 아랫부분이 문제인거 같은데요..

이미지 자동축소는 잘 됩니다. imgRsize 함수가 그 역할을 하고 있고요..

근데 자동으로 줄어든 이미지를 클릭하면 정상적으로 뜨지를 않고

텅텅 빈 탭만 뜨네요..

도대체 뭐가 잘 못 됐는지 알 수가 없네요..

http://tfh.or.kr/phpBB2/viewtopic.php?p=367466#367466

위의 링크를 클릭해보시면 대충 어떤 현상인지 아실 수 있을 겁니다.

제가 생각하기로는 일단 빈 탭이 뜨는 것을 봐서는 img.onclick이랑 function()은

문제 없는거 같고 window.open 첫번째 파라미터가 ""인게 마음에 걸리는데

IE에서는 잘 보이거든요.. 혹시 이거 때문인가요?

Rsize함수는 img 택에서 onload 이벤트에 Rsize(this, ...) 이렇게 호출을 하고는

있습니다만 java script가 인터프릿되는거라면 텅텅 빈 화면이 나올 수 밖에 없겠는데요..

FF에서 수정할 방법은 없습니까?

파란사오정 · Post by **파란사오정** » 2004 11 07 23:42 55

저는 가로, 세로 모두 320px짜리 그림(08.gif)을 가지고
아래의 소스코드로 시험을 해봤습니다.
Rsize()함수내에서 tt 값만을 수정했거든요...

그런데 결과는...
ie나 firefox나 팝업창이 정상적으로 뜨거든요...
그림도 원본크기로 정상적으로 뜨고요...

코드도 크로스브라우징에 맞게 잘 짜신것 같고....
이상한 점을 발견못하겠네요...

참고로, ie는 5.50.4522.1800 버전이고요,
firefox는 1.0PR (0.10.1) 버전입니다.

Code: Select all


function Rsize(img, ww, hh, aL)
{
    // var tt = imgRsize(img, ww, hh);
    var tt = [50, 50, img.width + 50, img.height + 50];
    if (img.width > ww || img.height > hh) // 가로나 세로크기가 제한크기보다 크면
    {
        img.width = tt[0]; // 크기조정
        img.height = tt[1];
        img.alt = '클릭하시면 원본이미지를 보실수있습니다.';
        if (aL) // 자동링크 on
        {
            img.onclick = function()
                {
                    wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                    wL = Math.ceil((screen.height - tt[3])/2.6);
                    mm = window.open("", 'viewOrig', 'width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                    var doc = mm.document;
                    doc.body.style.margin = 0; // 마진제거
                    doc.body.style.cursor = "hand";
                    var previewimg = doc.createElement("img");
                    previewimg.src = img.src;
                    doc.body.appendChild(previewimg);
                    doc.body.onmousedown = function(){ mm.close();}
                    doc.title = 'NUX';
                }
            img.style.cursor = "hand";
        }
    }
    else
    {
        img.onclick = function(){ alert("현재이미지가 원본 이미지입니다."); }
    }
}


-->
</script>

</head>

<body>

<!-- 본문 -->
<img src="../08.gif" onload="Rsize(this, 50, 50, true);" />

참고로, cursor는 w3c에서는 "pointer"가 손모양입니다.
ie에서는 "hand"가 손모양이고요...

그런데 이상한 것은 "hand"를 "pointer"로 고친 후에 ie로 보면
팝업창이 빈창이 되거든요....firefox는 정상인데....

leejin0 · Post by **leejin0** » 2004 11 08 03:38 11

허.. 이것 참 난감하군요..

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041103 Firefox/1.0RC2

위의 브라우저로 ieview 0.84, Super DragAndGo 0.2.3(disabled),

Tabbrowser Extensions 1.11.2004110502, Disable Targets For Downloads 0.7을

쓰고 있는 상황에서는 아무리 해도 새로 뜬 창에는 하얀 배경만 나오는군요...

Disable Targets For Downloads 0.7 확장은 있으나 없으나 같았고요..

아 이걸 어떻게 해결해야 할지 참 난감합니다...

파이어폭스의 버그라고 해야할지.. 자바스크립트 코드가 잘 못된 것인지 종 잡을 수가 없군요..

자바스크립트 에러가 안뜬다하더라도 그건 에러가 없다는 뜻일 뿐이니..

파란사오정 · Post by **파란사오정** » 2004 11 08 09:44 01

탭브라우져 확장을 사용하셨군요...

( http://piro.sakura.ne.jp/xul/_tabextensions.html.en )

여기서 확장을 내려받아서 설치해서
위와 같은 동작을 해보니...
역시 님의 말씀대로 빈창이 뜹니다.

firefox와 탭브라우져확장간에 문제가 발생한 것 같습니다.
탭브라우져확장이 설치되지 않았을 때는 정상적인 팝업창이 뜨고요...

현재 어느쪽 문제인지는 연구를 더 해봐야 되겠습니다.

아래와 같이 코드를 "오래된 방식"으로 수정하니 정상적인 팝업창이 뜹니다....

Code: Select all

            img.onclick = function()
                {
                    wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                    wL = Math.ceil((screen.height - tt[3])/2.6);
                    mm = window.open("", 'viewOrig', 'menubar,resizable,width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                    var doc = mm.document;

                    // 파란사오정 수정부분
                    doc.open();
                    doc.write("<img src=\"../08.gif\">");
                    doc.close();

                    doc.body.style.margin = 0; // 마진제거
                    doc.body.style.cursor = "pointer";
                    doc.body.onmousedown = function(){ mm.close();}
                    doc.title = 'NUX';
                }

파란사오정 · Post by **파란사오정** » 2004 11 08 11:13 36

아래 코드에서 body element를 강제로(?) 삽입을 하였더니
정상적인 팝업창이 뜹니다.

firefox가 탭브라우징시에 body element를 어떻게 처리하는지...???

Code: Select all


            img.onclick = function()
                {
                    wT = Math.ceil((screen.width - tt[2])/2.6); // 클라이언트 중앙에 이미지위치.
                    wL = Math.ceil((screen.height - tt[3])/2.6);
                    mm = window.open("", 'viewOrig', 'menubar,resizable,width='+tt[2]+',height='+tt[3]+',top='+wT+',left='+wL);
                    var doc = mm.document;

                    // 파란사오정 추가부분 시작
                    doc.open();
                    doc.write("<body></body>");
                    doc.close();
                    // 파란사오정 추가부분 끝

                    doc.body.style.margin = 0; // 마진제거
                    doc.body.style.cursor = "hand";
                    var previewimg = doc.createElement("img");
                    previewimg.src = img.src;
                    doc.body.appendChild(previewimg);
                    doc.body.onmousedown = function(){ mm.close();}
                    doc.title = 'NUX';
                }

Post by **hyeonseok** » 2004 11 08 11:29 42

이것은 다른 문제일 수도 있는데...

에러냐 아니냐, 왜 안되냐...등등을 따질때 우선적으로 고려 해야 하는 것이 올바른 코드인가? 입니다.

창을 열고 javascript 로 element 를 생성해서 이미지를 표현하는 것은 상당히 좋은 방법이기는 하지만...지근 나와있는 코드는...validation 을 거치지 않은...표준에 어긋나는 코드 입니다.

이와 비슷한 경우로... 화면 redirection 을 위해서 form 을 이용하는 분들이 계십니다.
이경우에도 html 과 body 등의 element 없이 form 만 적게 되면 IE 에서는 정상적으로 작동을 하지만, 그외의 브라우져에서는 redirection 이 이루어지지 않습니다. html 자체가 없기 때문에 DTD 에서도 오류고, form submit 이 이루어 지지 않는 것 같습니다.

마찬가지로...이 javascript 도 아무것도 없는 window 에 img 만 있으니 정상적으로 작동하지 않더라도 이상할 것은 없습니다. 제 생각에는 body element 를 강제로 만들지 않았을때 작동하던 것이 일종의 유연함...이 아니었을까 싶네요.

IE 가 너무나 유연해서 문제가 많이 발생했다는 것은 다들 아실 것입니다.

제대로 한다면 !DOCTYPE 도 만들고 html element 도 만들고 body element 도 만들고...등등을 해줘야 하겠지요.

Mozilla 한국 커뮤니티

이미지 자동 축소, 클릭시 원본크기 팝업 불가

이미지 자동 축소, 클릭시 원본크기 팝업 불가

re:....

그렇군요....

body element 문제인것 같은데요...

잘못된 HTML 구문

Who is online