YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

팝업으로 이미지 보기(이동, 닫기, 팝업크기)

페이지 정보

작성자 MintState 댓글 0건 조회 9,902회 작성일 08-11-17 11:25

본문

팝업으로 이미지 보기(이동, 닫기, 팝업크기)

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


이미지 주소 부분을 넘겨 받아서 출력 해 주면 될것 같습니다.

댓글목록

등록된 댓글이 없습니다.

Total 178건 6 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
78 MintState 7928 11-17
77 MintState 12349 11-17
76 MintState 10093 11-17
75 MintState 11656 11-17
74 MintState 18358 11-17
73 MintState 11306 11-17
72 MintState 10748 11-17
71 MintState 11756 11-17
열람중 MintState 9903 11-17
69 MintState 8678 11-17
68 MintState 7721 11-17
67 MintState 8443 11-17
66 MintState 8028 11-17
65 MintState 9128 11-17
64 MintState 7921 11-17
63 MintState 12835 11-11
62 MintState 9596 11-10
61 MintState 8208 11-10
60 MintState 8784 11-10
59 MintState 9950 11-10
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2021, YesYo.com MintState. ™