AJAX

Javascript Opcaity OnMouseOver

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2008

Posts: 22

Reputation: Agent Cosmic is an unknown quantity at this point

Solved Threads: 0

Agent Cosmic Agent Cosmic is offline

Offline

Newbie Poster

Javascript Opcaity OnMouseOver

Jan 31st, 2009

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div id="homebg" onmouseover="home_on()" onmouseout="home_off()"><img name="homebtn" style="opacity: 0;" src="Home-On.png" alt="Home Button Image" /></div>
<div id="homebg" onmouseover="home_on()" onmouseout="home_off()"><img name="homebtn" style="opacity: 0;" src="Home-On.png" alt="Home Button Image" /></div>