이미지 싸이즈대로 새창띄우면서 풍선도움말 넣고, 창닫기
head부분에 아래 소스를 넣습니다.
<script language="javascript">
function view(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("<html>");
imgwin.document.write("<head>");
imgwin.document.write("<title>마우스 오버시 풍선말</title>");
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 + 0; myWidth = eval(pic).width + 0;\n");
// 40 12
imgwin.document.write(" } else { myHeight = eval(pic).height + 0; myWidth = eval(pic).width; }\n"); // 9
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");
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>");
imgwin.document.write("</head>");
imgwin.document.write('<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">');
imgwin.document.write("<a href="# onclick=window.close() onfocus=this.blur()><img border=0 src="+what+" xwidth=100 xheight=9
name=il onload='resize();'></a>");
imgwin.document.write("</body>");
imgwin.document.close();
}
</script>
body 부분에
<script language="javascript" src="winclose.js></script>
//winclose.js은 첨부파일 다운 받아 문서와 같은 폴더에 넣으세요.
그리고는 썸네일 이미지 넣을 자리에
<a href="javascript:view('image/보여질 원본그림.gif')" onMouseOver="viewon('풍선말', 0); return true;" onMouseOut="viewoff(); return true;" onfocus="this.blur()"><img src="image/썸네일이미지.gif" width="150" height="100" border=0 new_win.focus()"></a>
풍선말 위치 조정 숫자( 마우스를 기준으로)
'가운데', 0
'오른쪽', 1
'왼쪽', 2
첨부파일 : winclose-cil1.zip
이렇게도 변형을 해서 사용을 할 수 있군요.
<P align=center>
<a href="#" onclick="window.open('http://life.park5611.pe.kr/Album/New01/2013/Gayo/Gasa/Poongja/09.jpg','adpop','scrollbars=yes,resizable=yes,menubar=no,toolbar=no,location=no,width=628,height=648');"></P>
<P align=center><img src="http://life.park5611.pe.kr/Album/New01/2013/Gayo/Gasa/Poongja/09.jpg" width="100" height="100" border="0" ></a></P>