Results 1 to 5 of 5

Thread: Gradually fading Mouseovers?

  1. #1
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Gradually fading Mouseovers?

    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!!!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 07-08-2007 at 06:35 AM. Reason: enable multiple use
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •