Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Gradual Image Fade effect issue

  1. #1
    Join Date
    Sep 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Gradual Image Fade effect issue

    I hope this is the right place where I can exhibit my case...

    I'm in amidst of building a new layout for my web site and found a very convenient Script on DD that accomplished my desires. The script I am referring to is the Gradual Highlight Image II. Now, the script is lovely and it does everything I anticipated (and searched for) but it only works in IE5+. And that, ladies and gents, is my problem - a lovely script combined with a lovely idea that only works in one browser brand.

    I am no programmer, and I really admire the simplicity of tuning this script and, most of all, the gradual fade in and fade out on mouse over, but can there be done something about the compatibility with the rest of the browsers in the world (at least some)?

    Why am I so eager? Well, if you'd care to make a leap to my home page (see address below my name) when my oration is done you will whiteness a mosaic of a carefully crafted picture by myself, intertwined with this specific fade effect. It's a shame this same effect is only reserved for Microsoft users (and here I would exclaim)...

    Can I at all remedy this?
    You have my permission to take your leave, thank you

    Maya
    http://www.naidiriv.com

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, little has changed from your, the user's, point of view but, those changes are important! You cannot use a destination opacity greater than 99 because FF and other Mozilla based browsers cannot handle it. Fortunately, 99 is so close to 100 that no one will be able to tell the difference by just looking. The other change you need to pay attention to is in the style for for the elements that you want to apply this to. It has been expanded to cover other browsers:
    Code:
    style="filter:alpha(opacity=10);-moz-opacity:0.10;opacity:0.10;"
    Here is the script, tested in FF1.0.7, NS7.2 and IE6. It degrades well in OP8, which has no opacity support, should do the same in other modern browsers that lack such support, and should work in browsers that support style.opacity as well.
    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    
    /*
    Gradual-Highlight Image Script II- 
    By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
    Permission granted to Dynamicdrive.com to feature script in archive
    For full source to script, visit http://dynamicdrive.com
    Modified here by jscheuer1 in http://dynamicdrive.com/forums/
    to work with Mozilla and other opacity compliant browsers
    in addition to the original IE functionality
    */
    
    nereidFadeObjects = new Object();
    nereidFadeTimers = new Object();
    
    /* object - image to be faded (actual object, not name);
     * destop - destination transparency level, use 0 to 99 (ie 80, for mostly solid, set no higher than 99)
     * rate   - time in milliseconds between trasparency changes (best under 100)
     * delta  - amount of change each time (ie 5, for 5&#37; change in transparency)
     */
     
    function sourceNum(obj){
    if ((document.documentElement.sourceIndex*1)+1)
    return obj.sourceIndex;
    else if (document.getElementsByTagName)
    var order=document.getElementsByTagName('*')
    for (var i_tem = 0; i_tem < order.length; i_tem++)
    if (order[i_tem]==obj)
    return i_tem;
    }
    
    function nereidFade(object, destOp, rate, delta){
          if (object.toString().indexOf('object') == -1){  //do this so I can take a string too
              setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
              return;
          }
      if (!(object.filters||object.style.MozOpacity||object.style.opacity))
      return;
        var objOpac=object.filters? object.filters.alpha.opacity : object.style.MozOpacity? object.style.MozOpacity*100 : object.style.opacity? object.style.opacity*100 : null
        clearTimeout(nereidFadeTimers[sourceNum(object)]);
        
        diff = destOp-objOpac;
        direction = 1;
        if (objOpac!==null&&objOpac > destOp){
            direction = -1;
        }
        delta=Math.min(direction*diff,delta);
        if (object.filters)
        object.filters.alpha.opacity+=direction*delta;
        else if (object.style.MozOpacity)
        object.style.MozOpacity=(object.style.MozOpacity*1)+(direction*delta/100);
        else if (object.style.opacity)
        object.style.opacity=(object.style.opacity*1)+(direction*delta/100);
        
        objOpac=object.filters? object.filters.alpha.opacity : object.style.MozOpacity? object.style.MozOpacity*100 : object.style.opacity? object.style.opacity*100 : null
    
        if (objOpac!==null&&objOpac != destOp){
            nereidFadeObjects[sourceNum(object)]=object;
            nereidFadeTimers[sourceNum(object)]=setTimeout("nereidFade(nereidFadeObjects["+sourceNum(object)+"],"+destOp+","+rate+","+delta+")",rate);
        }
    }
    
    </script>
    </head>
    <body>
    <img style="filter:alpha(opacity=10);moz-opacity:0.10;opacity:0.10;" onmouseover="nereidFade(this,99,30,5)" onmouseout="nereidFade(this,10,50,5)" src="some.jpg" width="100" height="25" border="0" alt="" title="" />
    </body>
    </html>
    Last edited by jscheuer1; 05-12-2007 at 04:28 AM. Reason: fix typo that affected -moz-opacity
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, yes! Thank you!
    I've had the mozaic tested by a friend and he concluded that it works with some browsers but does not with others (such as NS 6, Opera 6..)
    All in all, much thankfull!

    Maya

  4. #4
    Join Date
    Oct 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Highlight IE issue

    I am too am setting up a site on which the fade effect is the just right thing.
    I have installed the script: http://dynamicdrive.com/dynamicindex4/highlightgrad.htm

    Within the image tag I inserted the code as instructed:
    Code:
    class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"
    The individual for whom I am building the site was amazed - NICE.

    So, the point... This script works superbly in Mozilla and FireFox. I cannot get it to work in IE. I have tried IE6 and IE5 and IE 5.2.1MAC... but for some reason, no go?

    Is there a piece of the picture I have missed?
    Thank you! - Great Script

    tGriff

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script you mention is a different one than that originally covered in this thread. It's (the script you mention) demo here on DD works fine in IE6. As a result, I see no problem. If you want help fixing your implementation:

    PLEASE: Include the URL to your problematic webpage that you want help with.
    - John
    ________________________

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

  6. #6
    Join Date
    Oct 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your rapid response!
    I discovered the reason for the strange behavior was a call to different styles within the css of the site I was working on.

    Thank YOU for responding!
    All is working superb :-)

  7. #7
    Join Date
    Nov 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi john and thank you for your great job on this script. I decided to try it on the next version of the website I'm working on, but it seems I have some problems about the script relatives to "fire events" which start just near in time (sorry for my bad english, I'm french ^^).

    So, If you want to see what are the "problems" just have a look on the prototype at http://www.push-start.com/pushy_V4/proto_fader.html

    In fact, the fades effects don't terminate normally I guess, and that's why when you navigate relatively quickly among the links (the name of the games), some images just "freeze" in their current opacity... Do you see what I mean ? (poor frenchy I am ^^)

    I had this problem too with the old script I found, much more simple and basic than yours, and then I just decided to make one fader_script for each image... It's not so great :-S Check it at http://www.push-start.com/pushy_V4/proto.html


    Thank you in advance for your advices! =)
    Last edited by dreff; 11-03-2005 at 04:50 PM.

  8. #8
    Join Date
    Dec 2005
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok, now, i know this thread is old, but, dont want to start a new thread for something that has been answered already. i just have a question about the new code that was posted above to make the script work in FF too.

    here is the test page i am trying to get this to work on
    http://www.lissadoll.com/Untitled-1.htm

    i would like to put the style in to a class.
    style="filter:alpha(opacity=10);moz-opacity:0.10;opacity:0.10;"

    so, i set up the following:
    .thumbIMG {
    border: 0;
    filter:alpha(opacity=50);
    moz-opacity:0.50;
    opacity:0.50;
    }

    here is the problem, if i remove the style from the image tag, and call the class instead, the script doesnt work, but, if i leave it there, it works.
    i dont want to type a style or even copy and past it for each image. i just want to call the class. it is a lot easier to change one class than it is to change 500 images. please let me know why it is rejecting the class, and if you can tell me how to fix it, it would be greatly appreciated.

    thanks in advance for the help.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If the style isn't inline, then tests like:

    Code:
    else if (object.style.MozOpacity)
    will be false, no matter what. There are quite a few of these type of tests for MozOpacity and generic opacity (the filter tests are not affected by this).

    I'm not certain, but if you change all those sorts of tests, including the ones in the compound statements:

    Code:
    if (!(object.filters||object.style.MozOpacity||object.style.opacity))
    and:

    Code:
    var objOpac=object.filters? object.filters.alpha.opacity : object.style.MozOpacity? object.style.MozOpacity*100 : object.style.opacity? object.style.opacity*100 : null
    to, ex:

    Code:
    if (!(object.filters||typeof object.style.MozOpacity=='string'||typeof object.style.opacity=='string'))
    That may overcome this limitation of the script.

    If that won't work, then you will need to initialize the inline style of the objects via script before the rest of the script code runs.
    - John
    ________________________

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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It works:

    Code:
    <script type="text/javascript">
    
    /*
    Gradual-Highlight Image Script II- 
    By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
    Permission granted to Dynamicdrive.com to feature script in archive
    For full source to script, visit http://dynamicdrive.com
    Modified here by jscheuer1 in http://dynamicdrive.com/forums/
    to work with Mozilla and other opacity compliant browsers
    in addition to the original IE functionality
    */
    
    nereidFadeObjects = new Object();
    nereidFadeTimers = new Object();
    
    /* object - image to be faded (actual object, not name);
     * destop - destination transparency level, use 0 to 99 (ie 80, for mostly solid, set no higher than 99)
     * rate   - time in milliseconds between trasparency changes (best under 100)
     * delta  - amount of change each time (ie 5, for 5% change in transparency)
     */
     
    function sourceNum(obj){
    if ((document.documentElement.sourceIndex*1)+1)
    return obj.sourceIndex;
    else if (document.getElementsByTagName)
    var order=document.getElementsByTagName('*')
    for (var i_tem = 0; i_tem < order.length; i_tem++)
    if (order[i_tem]==obj)
    return i_tem;
    }
    
    function nereidFade(object, destOp, rate, delta){
          if (object.toString().indexOf('object') == -1){  //do this so I can take a string too
              setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
              return;
          }
      if (!(object.filters||typeof object.style.MozOpacity=='string'||typeof object.style.opacity=='string'))
      return;
        var objOpac=object.filters? object.filters.alpha.opacity : typeof object.style.MozOpacity=='string'? object.style.MozOpacity*100 : typeof object.style.opacity=='string'? object.style.opacity*100 : null
        clearTimeout(nereidFadeTimers[sourceNum(object)]);
        
        diff = destOp-objOpac;
        direction = 1;
        if (objOpac!==null&&objOpac > destOp){
            direction = -1;
        }
        delta=Math.min(direction*diff,delta);
        if (object.filters)
        object.filters.alpha.opacity+=direction*delta;
        else if (typeof object.style.MozOpacity=='string')
        object.style.MozOpacity=(object.style.MozOpacity*1)+(direction*delta/100);
        else if (typeof object.style.opacity=='string')
        object.style.opacity=(object.style.opacity*1)+(direction*delta/100);
        
        objOpac=object.filters? object.filters.alpha.opacity : typeof object.style.MozOpacity=='string'? object.style.MozOpacity*100 : typeof object.style.opacity=='string'? object.style.opacity*100 : null
    
        if (objOpac!==null&&objOpac != destOp){
            nereidFadeObjects[sourceNum(object)]=object;
            nereidFadeTimers[sourceNum(object)]=setTimeout("nereidFade(nereidFadeObjects["+sourceNum(object)+"],"+destOp+","+rate+","+delta+")",rate);
        }
    }
    
    </script>
    - John
    ________________________

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

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
  •