Fade in - fade out
Hej eksperterJeg har lavet følgende lille kode-eksempel for at illustrere mit problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Fade in - fade out</title>
<script>
function image_over(element,fade_1,fade_2){
fade_1++;
document.getElementById(element).style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+fade_1+')';
fade_2 = fade_2 + 0.01;
document.getElementById(element).style.MozOpacity=fade_2;
document.getElementById(element).style.opacity=fade_2;
if (fade_1 < 100) image_timeout = setTimeout('image_over(\''+element+'\',\''+fade_1+'\',\''+fade_2+'\')',30);
}
function image_out(element,fade_1,fade_2){
clearTimeout(image_timeout);
fade_1--;
document.getElementById(element).style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+fade_1+')';
fade_2 = fade_2 - 0.01;
document.getElementById(element).style.MozOpacity=fade_2;
document.getElementById(element).style.opacity=fade_2;
if (fade_1 > 70) image_timeout = setTimeout('image_out(\''+element+'\',\''+fade_1+'\',\''+fade_2+'\')',30);
}
</script>
</head>
<body>
<img src="1.jpg" onmouseover="image_over('image_1',70,0.70);" onmouseout="image_out('image_1',100,1.00);" id="image_1" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);-moz-opacity:0.70;opacity:0.70;" />
</body>
</html>
Kopier det ind i et dokument og gem det i en mappe sammen med et tilfældigt billede, der skal hedde "1.jpg".
Billedet vil nu være sløret (kun 70% vises). Når musen føres over billedet fjernes sløringen gradvist (100% vises). Når musen føres ud igen sløres det igen gradvist.
Alt sammen vældig fint, MEN hvis man fører musen væk fra billedet inden image_over har fjernet hele sløringen, kommer der et "hug" i den ellers glidende overgang.
image_over starter ved 70 og går mod 100. Hvis image_over kun når fra 70 til 85, vil jeg gerne have, at image_out starter ved 85 i stedet for 100 osv.
Håber det er forståeligt :)
Hvordan gøres det?
