SOARSINK.HTML

<html>

                <head>

                <title>Hello World</title>

</head>

<body>

<div id='lyr' img = "conductor.gif" style='position:absolute; top:40px; left:20px;

width:80px; height:80px; background-color:purple;

color:white; z-index:10; border:3px solid black'>

<IMG SRC="conductor.gif"></div>

<script type= "text/javascript" src= "soarsink.js">

</script>

<a href = "javascript://" onmouseover = "soar()"

onmouseout = "stop()">Soar</a>

<a href = "javascript://" onmouseover = "sink()"

onmouseout = "stop()">Sink</a>

</body>



</html>

SOARSINK.JS

// variable for timer

var timer;

function soar()

{

                var obj = document.getElementById("lyr");

                obj.style.top = (parseInt(obj.style.top)-1)+"px";

                timer = window.setTimeout("soar()", 50);

}

function sink()

{

                var obj = document.getElementById("lyr");

                obj.style.top = (parseInt(obj.style.top)+1)+"px";

                timer = window.setTimeout("sink()", 50);

}

function stop()

{

                clearTimeout(timer);

}