Gradual Image Fade effect issue

**Mandira** · 09-25-2005, 05:37 PM

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

**jscheuer1** · 09-25-2005, 10:21 PM

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>

**Mandira** · 09-27-2005, 03:56 PM

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

**tGriff** · 10-01-2005, 01:38 AM

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

**jscheuer1** · 10-01-2005, 01:24 PM

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.

**tGriff** · 10-02-2005, 08:03 PM

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 :-)

**dreff** · 11-03-2005, 04:47 PM

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

**jstgermain** · 05-11-2007, 05:43 AM

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.

**jscheuer1** · 05-11-2007, 02:04 PM

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.

**jscheuer1** · 05-11-2007, 03:10 PM

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>

Thread: Gradual Image Fade effect issue

Thread Tools

Search Thread

Gradual Image Fade effect issue

Image Highlight IE issue

Bookmarks

Bookmarks

Posting Permissions