How do I animate an image to fade in when I roll my mouse over a <div> and fade out when I move my mouse away. So far this is what I have. It doesn't seem to work well. Please help me, thanks.
Javascript
<script type="text/javascript">
var homebutton = document.homebtn.style.opacity;
var portfoliobutton = document.getElementById("portfolioimg");
var linkbutton = document.getElementById("linkimg");
var aboutbutton = document.getElementById("aboutimg");
function home_on(){
document.homebtn.style.opacity = document.homebtn.style.opacity + 0.1;
}
function home_off(){
document.homebtn.style.opacity = document.homebtn.style.opacity - 0.1;
}
</script>
HTML
<div id="homebg" onmouseover="home_on()" onmouseout="home_off()"><img name="homebtn" style="opacity: 0;" src="Home-On.png" alt="Home Button Image" /></div>