PDA

View Full Version : 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
<!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?



<!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/showthread.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.