/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
onMouseMove Event Handler
#camap {position:absolute; left:20; top:120}
#ormap {position:absolute; left:80; top:120}
#wamap {position:absolute; left:140; top:120}
// global variables used while dragging
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj
// set document-level event handlers
document.onmousedown = engage
document.onmouseup = release
// positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
obj.style.pixelLeft = x
obj.style.pixelTop = y
}
// setting the z-order of an object
function bringToFront(obj) {
if (frontObj) {
frontObj.style.zIndex = 0
}
frontObj = obj
frontObj.style.zIndex = 1
}
// set global var to a reference to dragged element
function setSelectedObj() {
var imgObj = window.event.srcElement
if (imgObj.id.indexOf("map") == 2) {
selectedObj = imgObj
bringToFront(selectedObj)
return
}
selectedObj = null
return
}
// do the dragging (called repeatedly by onMouseMove)
function dragIt() {
if (selectedObj) {
shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY))
return false
}
}
// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage() {
setSelectedObj()
if (selectedObj) {
document.onmousemove = dragIt
offsetX = window.event.offsetX - document.body.scrollLeft
offsetY = window.event.offsetY - document.body.scrollTop
}
}
// restore everything as before (called by onMouseUp)
function release() {
if (selectedObj) {
document.onmousemove = null
selectedObj = null
}
}
onMouseMove Event Handler
Click and drag the images: