Fade et billede med setinterval ?
Jeg vil ha' et billede til at fade ind onmouseover og fade ud onmouseout, med dette script:<html>
<head></head>
<body>
<script type="text/javascript">
<!--
function hide() {
timerOut = setInterval("fadeOut()", 100);
}
function fadeOut() {
if(document.getElementById('pic').style.opacity > 0.4) {
document.getElementById('pic').style.opacity -= 0.1;
} else {
clearInterval(timerOut);
}
}
function show() {
timerIn = setInterval("fadeIn()", 100);
}
function fadeIn() {
if(document.getElementById('pic').style.opacity < 1.0) {
document.getElementById('pic').style.opacity += 0.1;
} else {
clearInterval(timerIn);
}
}
//-->
</script>
<img id="pic" style="opacity: 0.4;" src="http://localhost/JavaScript/pic.gif" onmouseover="show();" onmouseout="hide();" />
</body>
</html>
Problemet er, at jeg godt kan få billedet til at fade ud, hvis jeg fx sætter style="opacity: 1;" og derefter "mouser væk" fra billedet.. Men det vil ikke fade ind??
Jeg må jo gøre noget forkert, og jeg håber at nogen kan fortælle mig hvad det er.
På forhånd tak!
