이미지 새창 띄워서 보기 및 닫기

Web/JavaScript 2009. 3. 18. 18:26 Posted by Request

<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>


위와 같은 자바 스크립트를 <head>와 </head> 사이에 넣어 주어야 하고요,,
빨간 박스 친 부분의 "창닫기" 라는건요,, 이미지가 크게 새창으로 열렸을때 그 이미지에 마우스를 대면,, "닫기" 라는 alt 문구가 나오게 된답니다.
또 이미지가 들어가는 태그에 다음과 같이 함수를 호출을 하고 크기등을 지정해야 한답니다..

 

<a href="javascript:doNothing()"
onClick="win1Open=displayImage('namo5_image/a_01.gif', 'popWin1', '466', '284')" onMouseOver="window.status='Click to display picture'; return true;"
onMouseOut="window.status=''"><img src="namo5_image/a_01_new.gif"
border="1"></a>

U've got a minute?Request 님의 블로그입니다.
 

티스토리툴바