画像をマウスで動かす

HOME > とほほのWWW入門 > アラカルト > アラカルト
1998年5月24日版
NN4.0ではダイナミックHTMLのレイヤ機能の応用として、画像をマウスでドラッグ(移動)するというテクニックを実現することができます。













これを実現するには、次のようなHTML文書を作成します。

<HTML>
<HEAD>
<TITLE>レイヤをマウスでドラッグする</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function init() {
    if ((navigator.appName != "Netscape") ||
        (navigator.appVersion.substring(0, 1) < 4)) {
        return;
    }
    boxX = document.layers['layer1'].pageX;
    boxY = document.layers['layer1'].pageY;
    boxW = document.layers['layer1'].clip.width;
    boxH = document.layers['layer1'].clip.height;
    window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    window.onmousedown = doMouseDown;
    window.onmouseup = doMouseUp;
    window.onmousemove = doMouseMove;
}

function doMouseDown(e) {
    if ((boxX <= e.pageX)
            && (e.pageX <= boxX + boxW)
            && (boxY <= e.pageY)
            && (e.pageY <= boxY + boxH)) {
        offsetX = e.pageX - boxX;
        offsetY = e.pageY - boxY;
        window.captureEvents(Event.MOUSEMOVE);
        return false;
    } else {
        return true;
    }
}

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

function doMouseUp(e) {
    window.releaseEvents(Event.MOUSEMOVE);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<LAYER ID="layer1" LEFT=100 TOP=200
       SRC="image/wwwpop.gif">
</LAYER>
<NOLAYER>
<IMG SRC="image/wwwpop.gif">
</NOLAYER>
</BODY>
</HTML>

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


Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )