画像をマウスで動かす

ダイナミックHTMLを用いて、画面上の画像をマウスで動かすテクニックを紹介します。Internet Explorer 4.0 以上、Netscape Communicator 4.0 以上、Netscape 6 に対応しています。

<html>
<head>
<title>テスト</title>
<script>
var obj;
var offsetX;
var offsetY;

function doInit() {
   if (document.layers /* Netscape Communicator 4.* */) {
      objlist = document.layers;
   } else if (document.all /* Internet Explorer 5.* */) {
      objlist = document.all.tags("SPAN");
   } else if (document.getElementsByTagName /* Netscape 6 */) {
      objlist = document.getElementsByTagName("SPAN");
   } else {
      return;
   }
   for (i = 0; i < objlist.length; i++) {
      if (document.layers) {
         objlist[i].captureEvents(Event.MOUSEDOWN);
      }
      objlist[i].onmousedown = onMouseDown;
   }
   if (document.layers) {
      document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
   }
   document.onmousemove = onMouseMove;
   document.onmouseup = onMouseUp;
}
function onMouseDown(e) {
   obj = this;
   if (document.layers) {
      offsetX = e.layerX;
      offsetY = e.layerY;
   } else if (document.all) {
      offsetX = event.offsetX + 2;
      offsetY = event.offsetY + 2;
   } else if (obj.getElementsByTagName) {
      offsetX = e.pageX - parseInt(obj.style.left);
      offsetY = e.pageY - parseInt(obj.style.top);
   }
   return false;
}
function onMouseMove(e) {
   if (!obj) {
      return true;
   }
   if (document.layers) {
      obj.pageX = e.pageX - offsetX;
      obj.pageY = e.pageY - offsetY;
   } else if (document.all) {
      obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
      obj.style.top = event.clientY - offsetY + document.body.scrollTop;
   } else if (obj.getElementsByTagName) {
      obj.style.left = e.pageX - offsetX;
      obj.style.top = e.pageY - offsetY;
   }
   return false;
}
function onMouseUp(e) {
   obj = null;
}
window.addEventListener("load", function() {
   doInit();
});
</script>
</head>
<body>

<span style="position:absolute; top:100px; left:100px; width:80px;">
<img src="aaa.gif" width=80 height=80 alt="AAA">
</span>

<span style="position:absolute; top:100px; left:200px; width:80px;">
<img src="bbb.gif" width=80 height=80 alt="BBB">
</span>

</body>
</html>

画像を増やしたいときは、画像を <span style="position:absolute; top:～; left:～; width:～">～</span> で囲んでください。

IE4.0/5.0(Win)、IE5.0(Mac)、Netscape 4.01/4.73/6(Win)、Netscape 4.7(Mac) で動作確認しています。

説明

実例

ソースコード

動作確認