✔ Fade IN Out funktioniert nicht im Mozilla

F

Fenriswolf

Grünschnabel
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
Zum Vergrößern anklicken....

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..
 
Zuletzt bearbeitet:
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 :)
 
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!!
 
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 :D

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>
 
Zuletzt bearbeitet:
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:
  1. this(Verweis auf das <img>, immer gleich)
  2. delta(Prozentpunkte, um die bei jedem Schritt gefadet werden soll)
  3. rate(Zeitintervall im ms, in dem gefadet werden soll)
  4. min(Minimalwert, auf den gefadet werden soll)
  5. max(Maximalwert, auf den gefadet werden soll)
  6. dir("Richtung", wenn das Bild onmouseover eingefadet werden soll 1, ansonsten 0)
 
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
 
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;)
 
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.
 
Zuletzt bearbeitet:
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück