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 = (t开发者_StackOverflow中文版oOpacity - 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>
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>
It looks like you're missing a function called SetOpacity, find this from where you got the script from and add it to your code. This should then work.
Here is a very efficient way of doing fades in or out in js without using jquery, a
Fade in and fade out with JavaScript & CSS
Although with jquery you write less code $(element).fade().
加载中,请稍侯......
精彩评论