View Single Post
  #7 (permalink)  
Old October 5th, 2009, 12:52 AM
iamrakesh22 iamrakesh22 is offline
Friend of Wrox
 
Join Date: Mar 2007
Location: Hyderabad, A.P., India.
Posts: 373
Thanks: 0
Thanked 1 Time in 1 Post
Default

Hi,
I tried to create a sample html page similar to your requirement, hope it helps!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample document </title>
    <script type="text/javascript">
        // function similar to your "autoscroll()"
        function changeColor() {
            var cl = document.getElementById('heading').style.color;
            // alert(cl);
            if (cl == 'red') {
                document.getElementById('heading').style.color = 'green';
            } else if (cl == 'green') {
                document.getElementById('heading').style.color = 'red';
            }
        }
        // function to start animation of sort on mouse over
        function start() {
            document.getElementById('heading').onmouseover = changeColor;
        }
        // function to stop the move over event
        function stop() {
            document.getElementById('heading').onmouseover = null;
        }
        // initialization function on your page
        function init() { 
            // this can be done inline but wanted to keep it similar to your code
            document.getElementById('heading').onmouseover = changeColor;
        }
        // initialize on page load
        window.onload = init;
    </script>
</head>

<body>
    <h1 id="heading" style="color:red;">Sample Heading</h1>
    <input type="button" value="Start" onclick="start()" />
    <input type="button" value="Stop" onclick="stop()" />
</body>
</html>
__________________
- Rakesh
http://iam-rakesh.blogspot.com