이야기 마을

<script language="Javascript1.1">

/*
desc : 레이어 안의 이미지가 클 경우 스크롤이 생성되게 하고 마우스로 이미지 끌어 이동시키는...
지도 찾기 생각하면 될듯...작업 중 필요한 일이 생겨 만들게 되었는데...그런데로 쓸만한듯....이미지가 크면 버벅대서 문제이기도...-0-;;;
date : 2007-04-18
by zekill
*/
///////////////////////////////////////////////////////////////
///////레이어 안의 이미지 마우스로 움직이기 시작///////////////
/////////////////////////////////////////////////////////////
var g_bMouseDown = false;
var g_nChangePositionX = 0;
var g_nChangePositionY = 0;
var g_layerBackground = null;
function IntValue(num){
    var temp = parseInt(num); if(isNaN(temp)){ temp = 0; }  return temp;
}
function js_moving_object_up() {
    g_bMouseDown = false;
}
function js_moving_object_down(target, event) {
 var evt = event||window.event;
 if(target.style.cursor == "move") {
  g_bMouseDown = true;
  g_nChangePositionX = evt.clientX;
  g_nChangePositionY = evt.clientY;
 }
}
function js_moving_object_move(e) {
 if(g_bMouseDown) {
  var evt = e||window.event;
  var distX = g_nChangePositionX - IntValue(evt.clientX);
  var distY = g_nChangePositionY - IntValue(evt.clientY);

  var background = g_layerBackground;
  var maxRight = background.scrollWidth - background.clientWidth;
  var maxBottom = background.scrollHeight - background.clientHeight;

  if(background.scrollLeft <= maxRight) {
   if( (background.scrollLeft == maxRight && distX > 0) || (background.scrollLeft == 0 && distX < 0) ) {
   } else {
    background.scrollLeft += distX;
    g_nChangePositionX = IntValue(evt.clientX);
   }
  }

  if(background.scrollTop <= maxBottom) {
   if( (background.scrollTop == maxBottom && distY > 0) || (background.scrollTop == 0 && distY < 0) ) {
   } else {
    background.scrollTop += distY;
    g_nChangePositionY = IntValue(evt.clientY);
   }
  }

  return false;
 }
}

//이놈으로 시작 js_moving_object(이미지개체, 배경레이어개체)
function js_moving_object(target, layer_background){
 try{
  target.style.position='relative';
  target.style.zIndex='9999';
  target.style.left='0px';
  target.style.top='0px';
 }catch(e){}
 target.style.cursor = "move";
 target.onmousedown = function(event){ js_moving_object_down(target, event); }
 target.onmouseup = js_moving_object_up;
 target.onmouseout = js_moving_object_up;
 target.onmousemove = js_moving_object_move;
 g_layerBackground = layer_background;
}
///////////////////////////////////////////////////////////////
///////레이어 안의 이미지 마우스로 움직이기 종료///////////////
//////////////////////////////////////////////////////////////

</script>



<div name="layer_mainThumb" id="layer_mainThumb" style="width:747px; height: 472px;overflow-x:scroll; overflow-y:scroll;">

<img name="mainThumb" id="mainThumb" src="image url">

<div>

<script>
 js_moving_object(document.getElementById("mainThumb"), document.getElementById("layer_mainThumb"));
</script>