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>
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Offline 51 posts
since Aug 2008
Unsolved 
