マウスでレイアを移動する

JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

この文章と
左右の画像は
マウスで
移動できます

マウスでレイアを移動する

■ このスクリプトのソース

<script>
N4 = GK = IE = obj = offsetX = offsetY = 0;
if (document.layers) N4 = 1;
else if (document.all) IE = 1;
else if (document.getElementById) GK = 1;

function init() {
   if (N4) {
      list = document.layers;
      document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
   }
   else if (GK) list = document.getElementsByTagName("div");
   else if (IE) list = document.all.tags("div");

   for (i = 0; i < list.length; i ++) {
      if (N4) list[i].captureEvents(Event.MOUSEDOWN);
      list[i].onmousedown = down;
   }
   document.onmouseup = up;
   document.onmousemove = move;
}

function down(e) {
   obj = this;
   if (N4) {
      offsetX = e.layerX;
      offsetY = e.layerY;
      for (i in list) list[i].zIndex = 0;
      obj.zIndex = 1;
   }
   else if (GK) {
      offsetX = e.pageX - parseInt(obj.style.left);
      offsetY = e.pageY - parseInt(obj.style.top);
   }
   else if (IE) {
      offsetX = event.clientX + document.body.scrollLeft - this.style.posLeft
      offsetY = event.clientY + document.body.scrollTop - this.style.posTop
   }
   if (! N4) {
      for (i = 0; i < list.length; i ++)
         list[i].style.zIndex = 0;
      obj.style.zIndex = 1;
   }
   return false;
}

function move(e) {
   if (obj) {
      if (N4) obj.moveTo(e.pageX - offsetX,e.pageY - offsetY);
      else if (GK) {
         obj.style.left = e.pageX - offsetX;
         obj.style.top = e.pageY - offsetY;
      }
      else if (IE) {
         obj.style.left = event.clientX + document.body.scrollLeft - offsetX;
         obj.style.top = event.clientY + document.body.scrollTop - offsetY;
      }
      return false;
   }
}

function up(e) {
   obj = null;
}

onload = init;
</script>

<!-- position:absolute を指定したdivで囲んだ物は幾つでも全て移動の対象になります -->

<div style="position:absolute; left:50px; top:70px; z-index:0;">
<img src="xxx.gif">
</div>
<div align=center style="width:150px; height:100px;
 border:double 3px black; position:absolute; left:250px; top:70px; z-index:0;">
<table height=100%><td>
この文章と<br>左右の画像は<br>マウスで<br>移動できます
</td></table>
</div>
<div style="position:absolute; left:450px; top:70px; z-index:0;">
<img src="yyy.gif">
</div>