Html문서 없이 그림으로 새창 띄우기
그림으로만 새창을 띄우기 때문에 불필요한 문서 여러개를 만드는 수고를 덜 수 있습니다. 창으로 뜬 문서의 그림에 마우스를 클릭하면 닫히기 때문에 창 닫기도 편합니다.
<head>와 </head> 사이에 아래 소스를 넣습니다.
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName, windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" + (parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
}
function winClose(){
if(win1Open != null) win1Open.close()
}
function doNothing(){}
</script>
<script language="JavaScript1.1">
function displayImage(picName, windowName, windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" + windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
htmlString += "<a href=javascript:window.close()><img src=" + picName + " border=0 alt=닫기></a>"
htmlString += "</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
닫기 라는 글씨는 새 창으로 뜬 그림 위에 마우스를 올리면 뜨는 툴팁의 내용입니다.
<body>와 <body> 사이에 이미지가 들어가는 위치에 링크를 걸어줍니다.
<a href="javascript:doNothing()" onClick="win1Open=displayImage('큰이미지', 'popWin1', '300', '250')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''"><img src="작은 이미지" border="0"></a>
작은 이미지를 클릭하면 큰이미지가 가로 300, 세로 250 크기의 새 창으로 뜹니다. 이 때 300,250 보다 큰이미지인 경우 가로 세로 픽셀값과 맞추면 됩니다 |
|
추천 : 