<HTML>
<HEAD>
<TITLE>Procedura obsugi zdarze onMouseMove</TITLE>
<STYLE TYPE="text/css">
    #camap {position:absolute; left:20; top:120}
    #ormap {position:absolute; left:80; top:120}
    #wamap {position:absolute; left:140; top:120}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
// zmienne globalne uywane przy przeciganiu
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj

// okrelenie procedur obsugi zdarze w obiekcie dokumentu
document.onmousedown = engage
document.onmouseup = release

// okrelenie wsprzdnych obiektu
function shiftTo(obj, x, y) {
    obj.style.pixelLeft = x
    obj.style.pixelTop = y
}

// okrelenie planu obiektu
function bringToFront(obj) {
    if (frontObj) {
        frontObj.style.zIndex = 0
    }
    frontObj = obj
    frontObj.style.zIndex = 1
}

// zapisanie odwoania do przeciganego obiektu w zmiennej globalnej
function setSelectedObj() {
    var imgObj = window.event.srcElement
    if (imgObj.id.indexOf("map") == 2) {
        selectedObj = imgObj
        bringToFront(selectedObj)
        return
    }
    selectedObj = null
    return
}

// przeciganie (funkcja wywoywana cyklicznie
// z procedury obsugi zdarze onMouseMove)
function dragIt() {
    if (selectedObj) {
        shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY))
        return false
    }
}

// okrelenie wartoci zmiennych globalnych i wyczenie 
// przechwytywania zdarze mousemove (funkcja wywoywana przez
// procedur obsugi zdarze onMouseDown)
function engage() {
    setSelectedObj()
    if (selectedObj) {
        document.onmousemove = dragIt
        offsetX = window.event.offsetX - document.body.scrollLeft
        offsetY = window.event.offsetY - document.body.scrollTop
    }
}

// przywrcenie stanu pocztkowego (funkcja wywoywana przez
// procedur obsugi zdarze onMouseUp)
function release() {
    if (selectedObj) {
        document.onmousemove = null
        selectedObj = null
    }
}

</SCRIPT>
</HEAD>
<BODY>
<H1>Procedura obsugi zdarze onMouseMove</H1>
<HR>
Kliknij i przecignij obrazy:
<IMG ID="camap" SRC="camap.gif" WIDTH="47" HEIGHT="82" BORDER="0">
<IMG ID="ormap" SRC="ormap.gif" WIDTH="57" HEIGHT="45" BORDER="0">
<IMG ID="wamap" SRC="wamap.gif" WIDTH="38" HEIGHT="29" BORDER="0">
</SCRIPT>
</BODY>
</HTML>