画像をマウスで動かす

1999年6月20日版

■ 説明

NN4.0ではダイナミックHTMLのレイヤ機能の応用として、画像をマウスでドラッグ(移動)するというテクニックを実現することができます。Netscape Navigator 4.0以降のみで使用できます。複数の画像に対応しました。(1999.6.20)

■ 実例







Netscape Navigator 4.0以外では動作しません。

■ ソースコード

<HTML>
<HEAD>
<TITLE>画像をマウスで動かす</TITLE>
<LINK REL=StyleSheet HREF="www.css">
<SCRIPT LANGUAGE="JavaScript">
<!--
function init() {
    nmax = 2; // 画像の個数を指定する
    if (!document.layers) {
        return;
    }
    boxX = new Array(nmax);
    boxY = new Array(nmax);
    boxW = new Array(nmax);
    boxH = new Array(nmax);
    for (i = 1; i <= nmax; i++) {
        boxX[i] = document.layers['L' + i].pageX;
        boxY[i] = document.layers['L' + i].pageY;
        boxW[i] = document.layers['L' + i].clip.width;
        boxH[i] = document.layers['L' + i].clip.height;
    }
    window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    window.onmousedown = doMouseDown;
    window.onmouseup = doMouseUp;
    window.onmousemove = doMouseMove;
}

function doMouseDown(e) {
    for (i = nmax; i >= 1; i--) {
        if ((boxX[i] <= e.pageX)
            && (e.pageX <= boxX[i] + boxW[i])
            && (boxY[i] <= e.pageY)
            && (e.pageY <= boxY[i] + boxH[i])) {
            offsetX = e.pageX - boxX[i];
            offsetY = e.pageY - boxY[i];
            nn = i;
            window.captureEvents(Event.MOUSEMOVE);
            return(false);
        }
     }
     return(true);
}

function doMouseMove(e) {
   boxX[nn] = e.pageX - offsetX;
   boxY[nn] = e.pageY - offsetY;
   document.layers['L' + nn].moveTo(boxX[nn], boxY[nn]);
}

function doMouseUp(e) {
   window.releaseEvents(Event.MOUSEMOVE);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<LAYER ID="L1" LEFT=10 TOP=50 SRC="wwwpop.gif"></LAYER>
<LAYER ID="L2" LEFT=60 TOP=50 SRC="wwwpop.gif"></LAYER>
<!-- 画像を増やす時は ID="L3", ID="L4"... とする -->
<NOLAYER>
Netscape Navigator 4.0以外では動作しません。
</NOLAYER>
</BODY>
</HTML>

IE4.0でも同様のことはできると思いますが、実装方式が全く異なりますので、またの機会に紹介できればと思います。

■ 動作確認

NN4.0(Win), NN4.05(Mac)で動作確認しています。また、IE4.0/5.0(Win)、NN2.0/3.0(Win)では動作はしませんが、エラーが発生しないことを確認しています。