## 画像をマウスで動かす

トップ > アラカルト > 画像をマウスで動かす

#### ■ 説明

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

#### ■ 実例

#### ■ ソースコード

    <html>
    <head>
    <title>テスト</title>
    <script type="text/javascript">
    <!--
    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;
    }
    //-->
    </script>
    </head>
    <body onload="doInit()">

    <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) で動作確認しています。

Copyright (C) 1997-2001 杜甫々
初版：1997年9月14日、最終更新：2001年10月27日
http://www.tohoho-web.com/wwwxx002.htm