|
|
 |
클라우드태그
Javascript PHP ASP css html mysql jquery image API Mobile 메뉴 slide 게시판
|
 |
 |
| 현재접속자 명 |
 |
|
|
|
|
|
|
 |
이미지 깔끔한 새창 띄우기  |
|
|
|
|
 |
소스분류 |
이미지관련 |
|
|
다운로드 횟수 |
1058 회 |
|
|
|
간단설명 |
이미지를 클릭하면 해당 이미지가 깔끔하게 새창 띄우기입니다. |
|
|
|
|
|
|
|
<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>
:: 이미지를 새창으로 띄우기 ::
|
|
|
위의 작은 이미지를 각각 클릭하면 큰 이미지가 새창으로 깔끔하게 맞춰져 열리고 이미지를 클릭하면 창닫기가 됩니다.
이 페이지에 사용된 이미지는 작은이미지3개 새창으로 뜨는 이미지 3개 총 6장의 이미지가 사용되었습니다. |
 우선 자바스크립트 소스를 <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('happyex01.jpg', 'popWin1', '540', '405')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''"><img src="happyex_s01.jpg" border="0"></a>
<a href="javascript:doNothing()" onClick="win1Open=displayImage('happyex02.jpg', 'popWin1', '531', '333')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''"><img src="happyex_s02.jpg" border="0"></a>
<a href="javascript:doNothing()" onClick="win1Open=displayImage('happyex03.jpg', 'popWin1', '500', '695')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''"><img src="happyex_s03.jpg" border="0"></a> | |
- happyex_s01.jpg를 클릭하면 happyex01.jpg 가로 540픽셀, 세로405픽셀 크기의 새창이 뜹니다. 이 때 540과 405는 각각 happyex01.jpg의 가로픽셀과 세로픽셀로 맞추시면 됩니다.
- happyex_s02.jpg를 클릭하면 happyex02.jpg 가로 531픽셀, 세로333픽셀 크기의 새창이 뜹니다. 이 때 531과 333는 각각 happyex02.jpg의 가로픽셀과 세로픽셀로 맞추시면 됩니다.
- happyex_s03.jpg를 클릭하면 happyex01.jpg 가로 500픽셀, 세로695픽셀 크기의 새창이 뜹니다. 이 때 500과 695는 각각 happyex03.jpg의 가로픽셀과 세로픽셀로 맞추시면 됩니다.
- 필요에 따라 위와 같은 방법으로 계속 추가하시면 됩니다.
|
| |
| |
|
|
|
| 네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.) |
|
