Mouse Click Animation

Similarly to keyboard capturing, we can use the mouse to start any animation. What the following will do is create a hyperlink, that when pressed, will slide a block. When you release the link it will stop.

The script should be nothing new. We'll need an active variable in there again, and the move function is a carbon copy of previous functions:

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
	block.xpos = parseInt(block.left)
	block.active = false
}

function slide() {
	if (block.active) {
		block.xpos += 5
		block.left = block.xpos
		setTimeout("slide()",30)
	}
}

The trick is with what I do with the hyperlink:

<A HREF="javascript:void(null)" onMouseDown="block.active=true; slide(); return false;" onMouseUp="block.active=false" onMouseOut="block.active=false">move</A>

The onMouseDown sets the active variable to true, and then calls the slide() function which begins our animation. While the link is held, nothing changes. It continues to slide until you release the hyperlink - and hence execute whatever is in the onMouseUp handler. It sets the active variable to false which stops the slide.

The onMouseOut also sets the active variable to false for error proofing reasons. I found that if you move the mouse off the link and then release, it wouldn't stop the animation - because you're not executing an MouseUp over the link. But if you include the onMouseOut it accounts for this loop-hole.

Click here to view this example

Home Next Lesson: Clipping Layers
copyright 1998 Dan Steinman


Casa de Bender