<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> sjisbmoc </title>
<script language='javascript'>
<!--
var csz = 0;
var swd = 107;
var sht = 109;
var imgs = new Array();
// 작은 이미지
imgs.push('http://donzbox.tistory.com/plugins/StatGraph/count/count.php?owner=253454');
// 중간 이미지
imgs.push('https://t1.daumcdn.net/cfile/tistory/1313944B4E1A3FFD05');
// 큰이미지
imgs.push('https://t1.daumcdn.net/cfile/tistory/1249B13C5052AFC711');
function fncSetSize(adn)
{
csz += adn;
if(csz<0) csz = 0;
if(csz>=imgs.length) csz = imgs.length-1;
var img = new Image();
img.src = imgs[csz];
img.onload = fncDispDivSize;
}
var dp; // 속성 표시창
var div;
var igh;
var winW;
var winH;
var selY;
var selX;
var movY;
var movX;
var flg = false;
window.onload = function()
{
div = document.getElementById('igDiv');
igh = document.getElementById('igID');
////////////////////////////////////////////////////////////////////////////////////////////////////
// 화면의 넓이 높이값
dp = document.getElementById('dpDiv');
winW= div.scrollWidth;
winH= div.scrollHeight;
dp.innerHTML = '넓이 '+winW+'\n높이'+winH;
////////////////////////////////////////////////////////////////////////////////////////////////////
}
function fncDispDivSize()
{
igh.style.width = this.width;
igh.style.height = this.height;
igh.style.backgroundImage = 'url("'+this.src+'")';
winW= div.scrollWidth;
winH= div.scrollHeight;
div.scrollTop = (this.height-sht)/2;
div.scrollLeft= (this.width-swd)/2;
dp.innerHTML = '넓이 '+winW+'\n높이'+winH;
}
function fnMouseDown()
{
flg = true;
div.style.cursor = 'move';
selY = 0;
selX = 0;
selY = window.event.clientY;
selX = window.event.clientX;
}
function fnMouseUp()
{
flg = false;
div.style.cursor = 'hand';
}
function fncMouseMove()
{
if(flg)
{
movY = window.event.clientY;
movX = window.event.clientX;
div.scrollTop = div.scrollTop - (movY-selY);
div.scrollLeft = div.scrollLeft - (movX-selX);
selY = movY;
selX = movX;
}
}
//-->
</script>
</head>
<body>
<form name='frm'>
<div id='dpDiv' style='position:absolute; left:150px; top:15px; height:100px; width:200px; margin:0px; padding:0px; border:1px solid #000000;'></div>
<div id='igDiv' style='border:solid 1px #000000; width:109px; height:109px; padding:0px; overflow:auto; overflow-x:hidden; overflow-y:hidden;' onmousedown='fnMouseDown(this);' onmouseup='fnMouseUp(this);' style='cursor:hand;' onmousemove='fncMouseMove();'><span id='igID' style='background-image:url("http://polo.imageg.net/graphics/product_images/pPOLO2-6290729_standard_t105.jpg"); width:105px; height:105px;'></span></div>
<br>
<input type='button' onclick='fncSetSize(1);' value='+'>
<input type='button' onclick='fncSetSize(-1);' value='-'>
</form>
</body>
</html>