PDA

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

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.

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

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:

.

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:


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:


if (!(object.filters||object.style.MozOpacity||object.style.opacity))

and:


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:


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:


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

jstgermain
05-11-2007, 03:10 PM
sorry, but i am not exactly sure what you are saying to do. i replaced the line


if (!(object.filters||object.style.MozOpacity||object.style.opacity))

with


if (!(object.filters||typeof object.style.MozOpacity=='string'||typeof object.style.opacity=='string'))


but, not sure if string is supposed to be there, or if it is supposed to be changed to something else, and, i am not sure what to change the following line to.


var objOpac=object.filters? object.filters.alpha.opacity : object.style.MozOpacity? object.style.MozOpacity*100 : object.style.opacity? object.style.opacity*100 : null

so, i cant really tell you if it is working or not since i am not sure exactly what to do.

also, i fixed the file i posted to work. i forgot to upload the image. :p please let me know what to do if you can. thanks for helping.

jstgermain
05-11-2007, 03:12 PM
NVM, you posted the other post when i was still typing mine i guess.
it works now. thanks a bunch.

zoeme
03-17-2009, 01:39 PM
Hi,

Thank you for this script. It works beautifully on the latest Safari but not on Firefox 3.0.7. Opera and IE. What's strange is when I use the preview in Browser function in Dreamweaver it works fine on all browsers but not live. So, I came here and thought may be it's the problem you are talking about on this post so I copied and pasted the script but it's still not working. Here's the working website:

http://www.heigekim.com/kat_root_folder/Corporate_1.html

Any help would be appreciated.

Thank you,
zoeme

Geezer D
03-17-2009, 08:55 PM
Hi,

Thank you for this script. It works beautifully on the latest Safari but not on Firefox 3.0.7. Opera and IE. What's strange is when I use the preview in Browser function in Dreamweaver it works fine on all browsers but not live. So, I came here and thought may be it's the problem you are talking about on this post so I copied and pasted the script but it's still not working. Here's the working website:

http://www.heigekim.com/kat_root_folder/Corporate_1.html

Any help would be appreciated.

Thank you,
zoeme


I'm not finding the gradualfader.js file on your site, did you upload it?
It's not in http://www.heigekim.com/kat_root_folder/assets/js/gradualfader.js, that address comes up 404 Not Found.