Thursday, June 30, 2005

Javascript Mouse Event I

My attempt at learning javascript...

Call the init() method from the body tag..
The text should follow the cursor when u execute this script.


ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

var str = "Javascript magic!!!"
var block;

function init() {
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
}

function mouseDown(e) {
if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop

return true
}

function mouseMove(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
status = "x:"+x+" y:"+y

//document.write(str)
block.left = x
block.top = y
document.getElementById('blockDiv').innerHTML = str;
return true
}

function mouseUp(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
return true
}




No comments: