Search code examples
javascripthtmlformsbuttonfading

making button fade using javascript onmouseover


I want to make my image button fade when I put the cursor over it. I am using a script I found online but it doesn't seem to be working.

<html>
<head>
<script type="text/javascript">


function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps)
{
    var steps = Math.ceil(fps * (time / 1000));
    var delta = (toOpacity - fromOpacity) / steps;

    FadeOpacityStep(elemId, 0, steps, fromOpacity, delta, (time / steps));
}

function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep)
{
    SetOpacity(document.getElementById(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)));

    if (stepNum < steps)
        setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1) + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + timePerStep + ");", timePerStep);
}

</script>
</head>


<body>

<form action="opacity.php" method="post">

<input type="image" name="blue" id="ImgAkxl2" value="blue" src="streetfighter.jpg"
onmouseover="UpdateOpacity2()"


/>
</form>

<script language="JavaScript" type="text/javascript">



            function UpdateOpacity2()
            {

                FadeOpacity("ImgAkxl2", 100, 50, 2000, 10);

            }

</script>



</body>
</html>

Solution

  • Here is the code with an implementation of the SetOpacity method:

    <html>
    <head>
    <script type="text/javascript">
    
    
    function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps)
    {
    var steps = Math.ceil(fps * (time / 1000));
    var delta = (toOpacity - fromOpacity) / steps;
    
    FadeOpacityStep(elemId, 0, steps, fromOpacity, delta, (time / steps));
    }
    
    function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep)
    {
    SetOpacity(document.getElementById(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)));
    
    if (stepNum < steps)
        setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1) + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + timePerStep + ");", timePerStep);
    }
    
    
    function SetOpacity(element, op)
    {
    element.style.opacity = op/100;
    element.style.filter = 'alpha(opacity='+ op+")";
    }
    
    </script>
    </head>
    
    
    <body>
    
    <form action="opacity.php" method="post">
    
    <input type="image" name="blue" id="ImgAkxl2" value="blue" src="us.jpg"
    onmouseover="UpdateOpacity2()"/>
    </form>
    
    <script language="JavaScript" type="text/javascript">
            function UpdateOpacity2()
            {
                FadeOpacity("ImgAkxl2", 100, 50, 2000, 10);
    
            }
    </script>
    
    
    
    </body>
    </html>