Using clever mouse events we can use a single hyperlink to start and stop an animation. When pressed the hyperlink will slide a block and when released the slide will stop.
The slide script is 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: Keystroke Events |