팝업으로 이미지 보기(이동, 닫기, 팝업크기)
로빈아빠
본문
팝업으로 이미지 보기(이동, 닫기, 팝업크기)
이미지 주소 부분을 넘겨 받아서 출력 해 주면 될것 같습니다.
<html>
<head>
<META http-equiv=Content-Type content=text/html;charset=euc-kr>
<meta http-equiv="imagetoolbar" content="no">
<title> 마우스로 이미지를 끌어 확인하세요 </title>
<style>
.drag { position: relative; cursor:move; }
</style>
<script language="JavaScript">
<!--
var bdown = false;
var x, y;
var sElem;
function mdown(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
sElem = evt.target ? evt.target : evt.srcElement;
if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
evt.returnValue = false;
evt.cancelBubble = true;
if(sElem.className == "drag") {
bdown = true;
x = evt.clientX;
y = evt.clientY;
}
}
function mup() {
bdown = false;
}
document.onmousemove = function moveimg(event) {
event = (event) ? event : ((window.event) ? window.event : "");
if(bdown) {
var distX = event.clientX - x;
var distY = event.clientY - y;
var targetImg = document.getElementById('imgTomove');
targetImg.style.left = (parseInt(targetImg.style.left) + distX) + 'px';
targetImg.style.top = (parseInt(targetImg.style.top) + distY) + 'px';
x = event.clientX;
y = event.clientY;
return false;
}
}
function setSize (x,y) {
var windowX, windowY;
//window.resizeTo(200, 200);
if (document.all)
{
width = 212 - (document.body.clientWidth - document.images[0].width);
height = 231 - (document.body.clientHeight - document.images[0].height);
} else {
width = 208 - (document.body.clientWidth - document.images[0].width);
height = 249 - (document.body.clientHeight - document.images[0].height);
}
windowX = (window.screen.availWidth-width)/2;
windowY = (window.screen.availHeight-height)/3;
if(width>screen.availWidth){
width = screen.availWidth;
windowX = 0;
}
if(height>screen.availHeight){
height = screen.availHeight;
windowY = 0;
}
window.resizeTo(width, height);
window.moveTo(windowX,windowY);
}
//-->
</script>
<script type="text/javascript">
function cursor(evt)
{
evt = (evt) ? evt : ((window.event) ? window.event : "")
document.getElementById('trail').style.display=""
document.getElementById('trail').style.position="absolute"
document.getElementById('trail').style.zIndex="3"
document.getElementById('trail').style.left=evt.clientX+10
document.getElementById('trail').style.top=evt.clientY
}
</script>
</head>
<body style="margin:0px; padding:0px; border:0px;" bgcolor="#fbfbfb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onmousemove="cursor(event)" ondblclick="window.close();" oncontextmenu="return false;" onload="setSize();">
<span id="trail" style="display:none; width:90px; border:1px solid #000000; padding:2px; background-color:#e5ecf9;font-family:돋움;font-size:8pt;color:#EF5900;">드레그 = 이동<br>더블클릭 = 닫기</span>
<table border=0 cellspacing=0 cellpadding=0 width="100%" height="100%">
<tr>
<td align=center valign=middle>
<img id="imgTomove" style="left:0px;top:0px"onmousedown="mdown(event);" onmouseup="mup();" name="cnjimg" ondblclick="window.close();" src="이미지 주소" class="drag" oncontextmenu="return false;">
</td>
</tr>
</table>
</body>
</html>
이미지 주소 부분을 넘겨 받아서 출력 해 주면 될것 같습니다.
관련링크
댓글목록
등록된 댓글이 없습니다.