✔ Fade IN Out funktioniert nicht im Mozilla

Fenriswolf · 13. September 2005

Hallo erst mal..

Ich hab hier ein kleines Script das soweit ganz gut funktioniert und kompakt ist.
Es bewirkt ein fade in des images bei mouseover und ein fade out bei verlassen des selbigen.
Nur hab ich das Problem das es nur im IE Explorer läuft
Hab bisserl herumprobiert und meine einfach das man die Werte, falls es sich um einen Mozilla Browser handelt in dem script irgendwie mitübergeben muss.
Also der img tag sieht wie folgt aus:

Code:

<img src="faust_schrift.jpg" style="filter:alpha(opacity=0);-moz-opacity: 0%" name="1" onmouseover="fade(this,100)" onmouseout="fade(this,0)">

Bin draufgekommen das die prozent bei -moz-opacity: 0% eigentlich falsch ist, mozilla arbeitet bei opacity mit 0.0 - 0.9 bei ie mit 0 - 100, hmm also ich bin am tüfteln 14.09.05 07:52 lg der Verfasser

Also bei der Function fade irgendwie einen dritten parameter für die opacity des mozillas, habs aber leider nicht hinbekommen..

So nun nun das eigentliche Script das im IE wie gesagt super läuft und ich es genau so haben möchte nur im Mozilla tut sich nüscht

Code:

<script>
	fadeObj=new Object();
	fadeTimer=new Object();
	var ns6=(window.sidebar)?true:false;	// mindestens Netscape 6?
	var ie4=(document.all)?true:false;	// mindestens Internet Explorer 4?

	function fade(img,go){	// img:aktuelles Bild;go:Ausgangs- oder Endwert für Opazität
		obj=img.name;
		destOp=go;
		rate=50;	// rate: Verzögerung für jede Blendstufe in ms
		delta=5;	// delta: Wert für Zu- oder Abnahme der Opazität pro Blendstufe
		if(!ns6&&!ie4)return;
		clearTimeout(fadeTimer[obj]);
		theOpac=(ie4)?img.filters.alpha.opacity:parseInt(img.style.MozOpacity);
		diff=destOp-theOpac;
		dir=1;
		if(theOpac>destOp)dir=-1;
		delta=Math.min(dir*diff,delta);
		if(ie4)img.filters.alpha.opacity+=dir*delta;
		else img.style.MozOpacity=theOpac+dir*delta+"%";
		if(ie4){
			if(img.filters.alpha.opacity!=destOp){
				fadeObj[obj]=img;
				fadeTimer[obj]=setTimeout("fade(fadeObj["+obj+"],"+destOp+")",rate)}
		}
		else{
			if(parseInt(img.style.MozOpacity)!=destOp){
				fadeObj[obj]=img;
				fadeTimer[obj]=setTimeout("fade(fadeObj["+obj+"],"+destOp+")",rate)}
		}
	}
</script>

Also wie gesagt ich hab schon herumbropiert hab es aber leider nicht geschafft. Wär echt total nett ( weil ich weiss was das für Arbeit is!!) wenn ich da Hilfe bekommen könnt!!

Danke euch schon mal für die Mühen !!

So hier nun noch ein Zusatz da ich jetzt rausgefunden hab wie das fade in funkltionieren könnte: also die opacity in mozilla mit den 0.1 bis 0.9 Werten. Im script hab ich dann anstatt

Code:

if(ie4)img.filters.alpha.opacity+=dir*delta;
		else img.style.MozOpacity=theOpac+dir*delta+"%";

dies gemacht

Code:

if(ie4)img.filters.alpha.opacity+=dir*delta;
		else img.style.MozOpacity=theOpac+dir*delta/100;

und somit funktioniert mal das fade in.
Nur Fade out hab ich noch nicht gebacken bekommen...hmm vielleicht erbarmt sich ja einer.. .

OK wie gesagt danke für jede Hilfe..

Sven Mintel · 15. September 2005

Vorschlag(der funktioniert

)

Code:

<script type="text/javascript">
<!--
IE  = document.all &&!window.opera;
GK  = window.sidebar;
AOB = [];
x   = 0;

function Fader()
{
  
  this.faktor=1;
  this.timeOut=false;
  this.fade=function(x)
    {
      clearTimeout(this.timeOut);
      this.value=Number(eval('this.object.'+this.attr))+(this.delta*x);
      if(this.value>=this.min && this.value<=this.max)
        {
          eval('this.object.'+this.attr+'='+this.value)
          this.timeOut=setTimeout('AOB['+this.index+'].fade('+x+')',this.rate);
        }
    }
}


function init_fader(obj,delta,rate,min,max)
{
  if(IE || GK)
    {
      AOB.push(new Fader(x));
      OB        = AOB[x];
      OB.index  = x;
      OB.object = obj;
      if(IE)
        {
          OB.attr = 'filters.alpha.opacity';
        }
      else
        {
          OB.attr   = 'style.MozOpacity';
          OB.faktor = 100;
        }
      OB.delta = delta/OB.faktor;
      OB.rate  = rate;
      OB.min   = min/OB.faktor;
      OB.max   = max/OB.faktor;
      OB.object.onmouseover = new Function('f1','AOB['+x+'].fade(1)');
      OB.object.onmouseout  = new Function('f2','AOB['+x+'].fade(-1)');
      OB.fade(1);x++;
    }
}

//-->
</script>

gestartet wird das Ganze durch Aufruf von init_fader() im Mouseover des Bildes.
Die Parameter: der erste ist immer this , die anderen sollten klar sein

Fenriswolf · 15. September 2005

Hi Sven!!
Spitzenmäßig!! Elegant, kompakt!! Vom feinsten, schwer beeindruckt!! Danke dir für die Mühe.
Das einzige worauf man hier nur achten muss das der max wert nicht 100 sein sollte, sonst muss die function init_fade per mouseover noch mal aufgerufen werden. Kann man aber 99 eingeben und auch supertoll!! Oder ich setz max wert -1 in der function

)

ein dreifaches hipp hipp hurraa den Tutorials.de Meistern hier, muss mal gesagt werden. Vor allem Die Tutorials hier sind schwer in Ordnung und haben mich auf interressante Ideen gebracht...

Danke!!

marley123 · 8. April 2007

DANKE SVEN (für den Verweis hier her)

Aber bei mir funkt das noch nicht, vielleicht kannst du mir noch einen Tip geben,
wo bei mir noch der Hund begraben sein könnte

Code:

<img src="button1.jpg" width="300" height="40" border="0" style="filter:alpha(opacity=100);-moz-opacity:1.0" onmouseover="init_fader(this,0,5)" onmouseout="init_fader(this,100,5)">
  
<script type="text/javascript">
<!--
IE  = document.all &&!window.opera;
GK  = window.sidebar;
AOB = [];
x   = 0;

function Fader()
{
  
  this.faktor=1;
  this.timeOut=false;
  this.fade=function(x)
    {
      clearTimeout(this.timeOut);
      this.value=Number(eval('this.object.'+this.attr))+(this.delta*x);
      if(this.value>=this.min && this.value<=this.max)
        {
          eval('this.object.'+this.attr+'='+this.value)
          this.timeOut=setTimeout('AOB['+this.index+'].fade('+x+')',this.rate);
        }
    }
}


function init_fader(obj,delta,rate,min,max)
{
  if(IE || GK)
    {
      AOB.push(new Fader(x));
      OB        = AOB[x];
      OB.index  = x;
      OB.object = obj;
      if(IE)
        {
          OB.attr = 'filters.alpha.opacity';
        }
      else
        {
          OB.attr   = 'style.MozOpacity';
          OB.faktor = 100;
        }
      OB.delta = delta/OB.faktor;
      OB.rate  = rate;
      OB.min   = min/OB.faktor;
      OB.max   = max/OB.faktor;
      OB.object.onmouseover = new Function('f1','AOB['+x+'].fade(1)');
      OB.object.onmouseout  = new Function('f2','AOB['+x+'].fade(-1)');
      OB.fade(1);x++;
    }
}

//-->
</script>

Sven Mintel · 8. April 2007

Hab die Sache mal noch etwas modifiziert:

Code:

<html>
<head>
<title>Test</title>

</head>
<body>
<img src="http://www.tutorials.de/forum/images_v6/misc/tuts_default.gif"  style="filter:alpha(opacity=20);-moz-opacity:0.2" onmouseover="init_fader(this,5,20,20,99,1)">
<img src="http://www.tutorials.de/forum/images_v6/misc/tuts_default.gif"  style="filter:alpha(opacity=100);-moz-opacity:1" onmouseover="init_fader(this,5,20,30,99,0)">

<script type="text/javascript">
<!--
IE  = document.all &&!window.opera;
GK  = window.sidebar;
AOB = [];
x   = 0;

function Fader()
{
  this.timeOut=false;
  this.fade=function(y)
    {
      clearTimeout(this.timeOut);
      this.value=Number(eval('this.object.'+this.attr))+(this.delta*this.evt[y]);
      if(this.value>=this.min && this.value<=this.max)
        {
          eval('this.object.'+this.attr+'='+this.value)
          this.timeOut=setTimeout('AOB['+this.index+'].fade('+y+')',this.rate);
        }
    }
}


function init_fader(obj,delta,rate,min,max,dir)
{
  if(IE || GK)
    {
      AOB.push(new Fader(x));
      OB        = AOB[x];
      OB.index  = x;
      OB.object = obj;
      if(IE)
        {
          OB.attr = 'filters.alpha.opacity';
          OB.faktor = 1;
        }
      else
        {
          OB.attr   = 'style.MozOpacity';
          OB.faktor = 100;
        }
      OB.delta = delta/OB.faktor;
      OB.rate  = rate;
      OB.min   = min/OB.faktor;
      OB.max   = max/OB.faktor;
      OB.evt=[-1,1];if(dir)OB.evt.reverse();
      OB.object.onmouseover = new Function('f1','AOB['+x+'].fade(0)');
      OB.object.onmouseout  = new Function('f2','AOB['+x+'].fade(1)');
      OB.fade(0);x++;
    }
}

//-->
</script>
</body>
</html>

Zur Erläuterung der einzelnen Parameter, mit denen das Ganze initialisiert wird:

this(Verweis auf das <img>, immer gleich)
delta(Prozentpunkte, um die bei jedem Schritt gefadet werden soll)
rate(Zeitintervall im ms, in dem gefadet werden soll)
min(Minimalwert, auf den gefadet werden soll)
max(Maximalwert, auf den gefadet werden soll)
dir("Richtung", wenn das Bild onmouseover eingefadet werden soll 1, ansonsten 0)

marley123 · 8. April 2007

Super DANKE Sven

Alles funkt. tadellos.

Ich weiss, der Beitrag ist nicht Regel konform.
Aber ich muss mich bedanken, da ich mich wirklich schon lange
damit herumärgere.

DANKE

Sven Mintel · 9. April 2007

Ich glaube, den Regelverstoss kann man mal durchgehen lassen

Wipeout · 22. April 2007

Schönen Guten Tag,

erstmal muss ich sagen ein super Script gefällt mir sehr gut.

Ich habe nur ein kleines problem und zwar soll das script bei mir genau das gegenteil machen.
Also wenn ich ein bild habe das mit 20 % nur angezeigt wird soll es beim Mouseover dann auf 100 % hoch gehen.
Was muss ich da ändern ?
Bin schon seit Stunden am basteln aber irgendwie steigt das script immer aus !

Ich hoffe das mir einer helfen kann oder aber nen gedankenanstoss geben kann

DMan · 23. April 2007

Hallo,
ich habe auch eine Frage: Wie mache ich so, dass beim MouseOver über ein Bild ein anderes rein oder raus fadet?

@Wipeout: Im letzten Codeblock sind beide Möglichkeiten enthalten. Siehe Erläuterung.

redhead · 30. Juli 2009

Hallo Zusammen,

wollte dieses Script nochmal aufgreifen und eigentlich nur fragen wie ich den fade verlangsamen kann? Wäre nett wenn einer antworten könne

Danke im Voraus.

✔ Fade IN Out funktioniert nicht im Mozilla

Fenriswolf

Grünschnabel

Sven Mintel

Mitglied

Fenriswolf

Grünschnabel

marley123

Grünschnabel

Sven Mintel

Mitglied

marley123

Grünschnabel

Sven Mintel

Mitglied

Wipeout

Erfahrenes Mitglied

DMan

Grünschnabel

redhead

Grünschnabel

Neue Beiträge