I need to change the opacity value of an image using JavaScript when i mouse over it but my code isn't working
===

I need the images opacity to increase when I mouse over and decrease when I mouse out and I need
this to be gradual and not instant as it would be with css.

    <html>
    <head>

    </head>
    <body>



    <img id="test" src="space1.png" onmouseover="updateOpacity()"/>



    <script type="text/javascript">


    var element = document.getElementById('test');

    var opacity = element.style.opacity;

    function updateOpacity() {
    opacity = opacity+=0.2;
    if(opacity >= 1) {
    // done
    opacity = 1;
    } else {
    element.style.opacity = opacity; // this updates the opacity
    setTimeout(function(){updateOpacity();}, 50); // 50 is the delay, 50milliseconds
    }
    }
    </stript>

    </body>
    </html>