Gradually fading Mouseovers?

**osmaan** · 07-08-2007, 04:52 AM

Does anyone know how I can get one image to fade to another in a mouseover? Not just a quick mouseover-- but a gradual fade?

I want one image, http://osmaan.com/_images/doors/pak1.jpg, to gradually fade to http://osmaan.com/_images/doors/pak2.jpg when you put your mouse on it.

this is the closest i can get... and its not what i want!
(please see www.osmaan.com). I want just the photograph INSIDE the arch to gradually fade to life... i want the arches to remain the way the are from before your mouse touches it to after.

PLEASE HELP! thanks!!!

**jscheuer1** · 07-08-2007, 06:20 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fader Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#pak {
width:201px;
height:375px;
background:black url(pak1.jpg);
}
#pak img {
opacity:0;
display:block;
}
</style>
<!--[if gte IE 6]>
<style type="text/css">
#pak img {
filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);
}
</style>
<![endif]-->
<script type="text/javascript">
function fade(el, way){
/*Modern Browser Fader by John Davenport Scheuer
  This comment must remain for Legal Use */
clearTimeout(el.timer);
var targ_op=way=='in'&&el.filters&&el.filters[0]? 100 : way=='in'? 1 : 0;
var waym=way=='in'? 1 : -1;
var optype=el.filters&&el.filters[0]&&typeof el.filters[0].opacity=='number'? el.filters[0] : el.style;
var opinc=el.filters&&el.filters[0]? 10 : .1;
if(/number|string/.test(typeof optype.opacity))
optype.opacity=optype.opacity*1 + opinc*waym;
else
return;
if(optype.opacity!=targ_op)
el.timer=setTimeout(function(){fade(el, way)}, 30);
}
</script>
</head>
<body>
<div id="pak"><img src="pak2.jpg" alt="" onmouseover="fade(this, 'in');" onmouseout="fade(this, 'out');"></div>
</body>
</html>

**packdragon** · 06-26-2008, 10:01 PM

I tried to alter this code so that mousing over an element triggers the fade-in / fade-out in another element (instead of the same element as it is in the code), however my javascript knowledge is pretty basic and I was unable to accomplish this. I've managed to get it into an error-free state, however nothing happens. Any suggestions?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fader Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#pak {
width:201px;
height:375px;
}
#pak img {
opacity:0.5;
display:block;
}
</style>
<!--[if gte IE 6]>
<style type="text/css">
#pak img {
filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);
}
</style>
<![endif]-->
<script type="text/javascript">
function fade(menulink, way){
/*Modern Browser Fader by John Davenport Scheuer
  This comment must remain for Legal Use */
  	var menublock = document.getElementById(menulink);
	clearTimeout(menublock.timer);
	var targ_op=way=='in'&&menublock.filters&&menublock.filters[0]? 100 : way=='in'? 1 : 0;
	var waym=way=='in'? 1 : -1;
	var optype=menublock.filters&&menublock.filters[0]&&typeof menublock.filters[0].opacity=='number'? menublock.filters[0] : menublock.style;
	var opinc=menublock.filters&&menublock.filters[0]? 10 : .1;
	if(/number|string/.test(typeof optype.opacity))
	optype.opacity=optype.opacity*1 + opinc*waym;
	else
	return;
	if(optype.opacity!=targ_op)
	menublock.timer=setTimeout(function(){fade(way)}, 30);
}
</script>
</head>
<body>
<a href="" onmouseover="fade('pak','in');" onmouseout="fade('pak','out');">TEST</a>
<div id="pak"><img src="logo_mmc_black.gif" alt=""></div>
</body>
</html>

**jscheuer1** · 06-26-2008, 11:59 PM

See:

http://www.dynamicdrive.com/forums/s...ad.php?t=22534

for more up to date code. The updated code can target the image element that is acted upon, or any other element, fetched by its id or as an element.

**packdragon** · 06-27-2008, 12:11 AM

Ah, 'tis a simple and elegant solution. Many thanks! I will try this code instead.

Thread: Gradually fading Mouseovers?

Thread Tools

Search Thread

Gradually fading Mouseovers?

Bookmarks

Bookmarks

Posting Permissions