JavaScript 이미지크기로 새창띄우기, 띄운창 이미지 클릭하면 창닫기
페이지 정보
본문
단순히 큰이미지 링크만 연결하면 되는 단순한 방법입니다.
큰이미지의 크기를 자동 해석해서 보여주기 때문에 편리하게 사용하실수 있습니다.
[ 방법 1 ]
정상 : IE 7 , FireFox 1.6~31 , Chrome 35
오류 : IE 11 > 팝업창으로 인식해서 팝업 차단된경우 추가 승인 눌러야만 창이 뜸 > 이미지는 창은 정상으로 열림
<script type="text/JavaScript">
<!--
/* 이미지 크기에 맞게 새창 열기*/
var imgObj = new Image();
function showImgWin(imgName) {
imgObj.src = imgName;
setTimeout("createImgWin(imgObj)", 100);
}
function createImgWin(imgObj) {
if (! imgObj.complete) {
setTimeout("createImgWin(imgObj)", 100);
return;
}
imgwin = window.open("", "imageWin","width=" + imgObj.width + ",height=" + imgObj.height);
imgwin.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>");
imgwin.document.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'>"); // euc-kr? utf-8?
imgwin.document.write("<title>큰이미지</title>"); // 새창 페이지 제목
imgwin.document.write("</head><body style='margin:0px;padding:0px'>");
imgwin.document.write("<a href='#' onclick='javascript:window.close()'><img src='" + imgObj.src + "' onclick='self.close();' alt='이미지를 클릭하시면 창이 닫힙니다.'></a>\n");
imgwin.document.write("</body><html>");
imgwin.document.title = imgObj.src;
}
//-->
</script>
<a href="javascript:showImgWin('images/index_customer.jpg')">새창으로 이미지 뜨기</a>
[ 방법 2 ]
정상 : IE 6.01 , FireFox 1.6~31 , Chrome 35
오류 : IE 11 > 새창이 이미지 크기와 다르게 작은창으로 열리는 오류 / 원인 확인중 ( 2014-07-14 )
IE 7 > 주소창 ie7_flag 때문에 이미지 하단이 21픽셀 안보임
<script text="text/JavaScript">
<!--
/* 이미지 크기에 맞게 새창 열기*/
function showImgWin(what) {
var imgwin =window.open("",'WIN','scrollbars=no,status=no,toolbar=no,resizable=1,location=no,menu=no,width=10,height=10');
imgwin.focus();
imgwin.document.open();
imgwin.document.write("<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>\n");
imgwin.document.write("<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'>\n"); // euc-kr? utf-8?
imgwin.document.write("<title>큰이미지</title>\n"); // 새창으로 페이지 제목
imgwin.document.write("<sc"+"ript>\n");
imgwin.document.write("function resize() {\n");
imgwin.document.write("pic = document.il;\n");
//imgwin.document.write("alert(eval(pic).height);\n");
imgwin.document.write("if (eval(pic).height) { var name = navigator.appName\n");
imgwin.document.write(" if (name == 'Microsoft Internet Explorer') { myHeight = eval(pic).height + 60; myWidth = eval(pic).width + 10;\n");
imgwin.document.write(" } else { myHeight = eval(pic).height + 56; myWidth = eval(pic).width + 8; }\n");
imgwin.document.write(" clearTimeout();\n");
imgwin.document.write(" var height = screen.height;\n");
imgwin.document.write(" var width = screen.width;\n");
imgwin.document.write(" var leftpos = width / 2 - myWidth / 2;\n"); //hjhj
imgwin.document.write(" var toppos = height / 2 - myHeight / 2; \n");
imgwin.document.write(" self.moveTo(leftpos, toppos);\n");
imgwin.document.write(" self.resizeTo(myWidth, myHeight);\n");
imgwin.document.write("}else setTimeOut(resize(), 100);}\n");
imgwin.document.write("</sc"+"ript>\n");
imgwin.document.write("</head><body style='margin:0px;padding:0px'>");
imgwin.document.write("<a href='#' onclick='javascript:window.close()'><img border='0' src='"+what+"' xwidth='100' xheight='50' name='il' onload='resize();' alt='이미지를 클릭하시면 창이 닫힙니다.' title='이미지를 클릭하시면 창이 닫힙니다.'></a>\n");
imgwin.document.write("</body></html>");
imgwin.document.close();
}
//-->
</script>
<a href="javascript:showImgWin('v6/images/index_customer.jpg')">새창으로 이미지 뜨기</a>
참고자료
http://www.imgwizard.com/?mid=tip&document_srl=430
추가
크롬, 파이어폭스에서 스크롤바 나오는거 제어하기
https://www.happyjung.com/bbs/board.php?bo_table=lecture&wr_id=970
댓글목록
등록된 댓글이 없습니다.