giloosh said:
Hello All,
How can you continue the mouseover event while the mouse is still over
an object?
For example:
I put my mouse over a hyperlink and that triggers an object to move
10px to the right.
I want the object to continue moving 10px to the right every 1 second
untill i take my mouse off of the hyperlink.
Use mouseover to start the object moving. Have a 'move the object'
function call itself sequentially using setTimeout each 1000ms. Use
mouseout to cancel the timer.
There are a number of different behaviours that can result from the
above depending upon the DOM structure of the particular elements and
whether you cancel bubbling/capture phases of event propigation.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>play</title>
<style type="text/css">
body {margin: 0; padding:0;}
#greyDiv {
width: 200px; height: 200px;
background-color: #ddd;
}
#redDiv {
width:3em; height:3em;
border:1px solid red;
position: absolute;
top: 0px; left: 0px;
}
</style>
<div id="greyDiv"
onmouseover="moveIt.start('redDiv');"
onmouseout="moveIt.stop();"
Mouseover me and the red guy will move...
<div id="redDiv">red div</div>
</div>
<span id="x"></span>
<script type="text/javascript">
var moveIt = (function()
{
var t;
var cursorPos = 'out';
function moveLeft(o){
o.style.left = parseInt(o.style.left||'0') + 10 + 'px';
}
return ({
start: function(id){
cursorPos = 'over';
if (!t){
moveIt.run(id);
}
},
run : function(id) {
var obj = document.getElementById(id);
if ('over' == cursorPos){
moveLeft(obj);
t = setTimeout('moveIt.run("'+id+'")',1000);
} else {
if (t) {
clearTimeout(t);
t = false;
}
}
},
stop : function() {
cursorPos = 'out';
}
});
})();
</script>
</html>
