Javascript code 4x in einer HTML datei

[RiFl]

Hallo, ich habe einen Javascriptcode gefunden der mir den weichen Fade macht.

Nur folgendes Prob: ich habe 4 Bilder und brauche den Code deshalb 4 mal (die bilder sollen sich nicht immer gleichzeitig ändern) Den Code habe ich nicht so ändern können (ich bin wohl zu blöd) dass ich ihn paralle verwenden kann.

Zur Verständlichkeit: http://www.ff-ebbs.at
Rechts oben sind die besagten vier Bilder (retten, löschen, schützen, bergen). Stellt euch hinter jedem der Bilder fünf weiter vor. Jetzt soll z.B. beim ersten bild alle 5 sec. zum nächsten gefadet werden, beim zweiten rechts daneben alle 7 zum nächsten usw...
Den Code habe ich hier gefunden: http://www.jojoxx.net/jscript/archive/show.asp?id=85

Folgende Optionen:
Die Zahl, welche für die Aktualisierungszeit steht als VAriable setzen und in den code eine feature ienbauen, das eine ganzzahlige zufallszahl(also in 1000er schritten) zwischen 10000 und 30000 generiert - Dann brauche ich den Code ja nicht vier mal weil dann sowiso jedes bild immer anderst aktualisiert wird und somit muss ich keine vier verschiedenen zeiten einstellen.

Andere Option: Den Code so anpassen, dass man ihn paralle verwenden kann.

Da ich absolut keine Ahnung bzw. nur sehr Wenig Ahnung von JavaScript habe, bitte ich euch, mir zu helfen.

Der Code ist hier:
code:
----------------------------------------------------------------------
<div id="Picfield1" style="position:absolute; left:50px; top:50px; width:115px; height:70px; z-index:1">
<div id="fadea" style="position:absolute;visibility:hidden;"><img src="http://riflpages.webmasternet.de/ff-ebbs/images/animation/retten/01.gif" width="115" height="70" alt="Fade"/></div>
<div id="fadeb" style="position:absolute;visibility:hidden;"><img src="http://riflpages.webmasternet.de/ff-ebbs/images/animation/retten/02.gif" width="115" height="70" alt="Fade"/></div>
<div id="fadec" style="position:absolute;visibility:hidden;"><img src="http://riflpages.webmasternet.de/ff-ebbs/images/animation/retten/03.gif" width="115" height="70" alt="Fade"/></div>
<div id="faded" style="position:absolute;visibility:hidden;"><img src="http://riflpages.webmasternet.de/ff-ebbs/images/animation/retten/04.gif" width="115" height="70" alt="Fade"/></div>
<div id="fadee" style="position:absolute;visibility:hidden;"><img src="http://riflpages.webmasternet.de/ff-ebbs/images/animation/retten/05.gif" width="115" height="70" alt="Fade"/></div>
<div id="fadef" style="position:absolute;visibility:hidden;"><img src="http://riflpages.webmasternet.de/ff-ebbs/images/animation/retten/06.gif" width="115" height="70" alt="Fade"/></div>
</div>

<script type="text/javascript">
var divs=["fadea","fadeb","fadec"];
var zindex=0;
function fade(n,diff,opacity){
 id=divs[n];
 opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;
 if(document.getElementById&&document.all){
  document.getElementById(id).style.filter="alpha(opacity="+opacity+")";
 }else if(document.getElementById&&!document.all){
  document.getElementById(id).style.MozOpacity = opacity/100;
 }
 document.getElementById(id).style.visibility="visible";
 if(opacity>=99){
  zindex++;
  document.getElementById(id).style.zIndex=zindex;
  setTimeout("fade("+n+",-"+diff+","+opacity+");",2000);
  nn=(n==divs.length-1)?0:n+1;
  setTimeout("fade("+nn+","+diff+");",2000);
 } else if(opacity>0){
  setTimeout("fade("+n+","+diff+","+opacity+");",30);
 }
}
fade(0,1);
</script>
--------------------------------------

Für andere und weitere Ideen bin ich offen.

mfg RiFl

[L00NIX]

Hallo.

Hast du in deinem geklautet Code nicht was vergessen
(lies mal den zweiten Satz, egal wie lächerlich er klingt):

/*  The code contained in this  file is copyrighted by www.jojoxx.net
The file may be used for none commercial applications and distributed
as long as these lines remain intact.  The file or part of it may not
be sold  or  included  in any  other commercial  application  without
agreement from the author. If you have questions or comments, contact
the author at http://www.jojoxx.net

© Copyright - www.jojoxx.net - 2004                                */

Dann führt dein Link ins Leere.

Außerdem erwartest du, dass sich hier irgendjemand erbarmt und dir
die Arbeit abnimmt. Viel Glück!

Wenn du JavaScript nicht beherrscht, solltest du es einfach
probieren, am besten mit geöffneter JavaScript Konsole. Sobald diese
bei der Ausführung leer bleibt und die von dir gewünschte
Funktionalität korrekt angezeigt wird (zumindest in IE und Mozilla,
andere kennen diesen Filter nämlich nicht), hast du es geschafft.

Gruß
L00NIX

[RiFl]

Hallo

Der Copyright ist nur weg um Platz zu sparen :rolleyes:
Ach ja... ich habe gestern 4h Probiert.... is aber net wirklich gegangen

@L00NIX
So viel Hilfe hättest du dir sparen können - wäre wirklich nicht nötig gewesen. Vielen Dank!

Es wäre trotzdem toll, wenn mir jemand ansatzweise verraten könnte wie es funktionieren könnte.
Ich erwarte nicht, dass mir die komplette Arbeit abgenommen wird.

mfg RiFl

[L00NIX]

Hallo.

Der Copyright ist nur weg um Platz zu sparen :rolleyes:

Dachte ich mir fast, war aber nicht selbstverständlich.

Ach ja... ich habe gestern 4h Probiert.... is aber net wirklich gegangen

Fehlermeldungen? Code?

@L00NIX
So viel Hilfe hättest du dir sparen können - wäre wirklich nicht nötig gewesen. Vielen Dank!

Es wäre trotzdem toll, wenn mir jemand ansatzweise verraten könnte wie es funktionieren könnte.
Ich erwarte nicht, dass mir die komplette Arbeit abgenommen wird.

Du hast aber schon alles gelesen, was ich geschrieben habe, oder?

Du hast eine Domain angegeben, die nicht existiert: http://www.ff-ebbs.at/

"The domain name does not exist"

Gruß
L00NIX

[Florian Ritzer]

Hi LOONIX

Ich glaube ich muss mich für meinen "Angriff" entschuldigen! Sorry deswegen! die Domain ist http://www.ff-ebbs.at.tf

Was ich probiert habe:
Also erstmal alle Variablen austauschen (aus diff "diffa" gemacht usw... hat aber nix gebracht... mit php und include()
Aber egal wie ichs gemacht habe
es is immer nur ein fade gegangen.
die codes waren aber in ordnung! denn wenn ich einen in /* */ gesetzt habe
dann is der andere gegangen und umgekehrt.

Danke, ich probier das mal mit der zufallszahl "z" ist ja in demfall die Variable, die muss ich also oben auch bei var() eintragen oder?

mfg RiFl

[L00NIX]

Hallo nochmal.

Weil ich heute gut drauf bin hier die Lösung deines Problems: ;o)

HTML-Datei:

<html>
<head>
  <title>Fader</title>
  <link rel="stylesheet" type="text/css" href="fade.css">
  <script src="fade.js" type="text/javascript"></script>
</head>
<body onload="init();">

<div class="bild1" id="div1-1"><img src="img/bild1-1.jpg" alt=""/></div>
<div class="bild1" id="div1-2"><img src="img/bild1-2.jpg" alt=""/></div>
<div class="bild1" id="div1-3"><img src="img/bild1-3.jpg" alt=""/></div>

<div class="bild2" id="div2-1"><img src="img/bild2-1.jpg" alt=""/></div>
<div class="bild2" id="div2-2"><img src="img/bild2-2.jpg" alt=""/></div>
<div class="bild2" id="div2-3"><img src="img/bild2-3.jpg" alt=""/></div>

</body>
</html>

CSS-Datei:

div
{
  margin:  0px;
  padding: 0px;
}

div.bild1
{
  position: absolute;
  top:  100px;
  left: 100px;

width:  100px;
  height: 100px;
}

div.bild2
{
  position: absolute;
  top:  100px;
  left: 200px;

width:  120px;
  height: 120px;
}

div.bild1, div.bild2
{
  visibility: hidden;
}

Und das wichtigste am Schluss, die JavaScript-Datei:

/*  Basiert auf dem Code von www.jojoxx.net
 *
 *  The code contained in this  file is copyrighted by www.jojoxx.net
 *  The file may be used for none commercial applications and distributed
 *  as long as these lines remain intact.  The file or part of it may not
 *  be sold  or  included  in any  other commercial  application  without
 *  agreement from the author. If you have questions or comments, contact
 *  the author at http://www.jojoxx.net
 *
 *  © Copyright - www.jojoxx.net - 2004
 */

function fade(m,n,diff,opacity)
{
  divId = divs[m][n];
  //alert("divId is "+divId);
  //alert(document.getElementById(divId).style.MozOpacity);

opacity = (opacity) ? opacity : (diff < 0) ? 100 : 0; opacity += diff;

// diese Browserweiche ist problematisch, da Mozilla inzwischen
  // auch klammheimlich das document.all Modell unterstuetzt
  if (document.getElementById && document.all)
  {
    // Internet Explorer
    document.getElementById(divId).style.filter = "alpha(opacity=" + opacity + ")";
  }
  else
  {
    // Mozilla (Gecko)
    if(document.getElementById && !document.all)
    {
      document.getElementById(divId).style.MozOpacity = opacity/100;
    }
  }

document.getElementById(divId).style.visibility = "visible";

if(opacity >= 99)
  {
    zindex[m]++;
    document.getElementById(divId).style.zIndex = zindex[m];
    setTimeout("fade("+ m + "," + n + ",-" + diff + "," + opacity + ");",2000);
    nn = (n == divs[m].length-1) ? 0 : n+1;
    setTimeout("fade("+ m + "," + nn + "," + diff + ");",2000);
  }
  else
  {
    if(opacity > 0)
    {
      setTimeout("fade("+ m + "," + n + "," + diff + "," + opacity + ");",30);
    }
  }
}

function init()
{
  // Assoziatives Array fuer die Bilderlisten
  divs   = new Array();
  zindex = new Array();

// erste ID-Liste der zu fadenden DIVs
  divs[0] = new Array();
  divs[0][0] = "div1-1";
  divs[0][1] = "div1-2";
  divs[0][2] = "div1-3";
  zindex[0] = 0;

// zweite ID-Liste der zu fadenden DIVs
  divs[1] = new Array();
  divs[1][0] = "div2-1";
  divs[1][1] = "div2-2";
  divs[1][2] = "div2-3";
  zindex[1] = 0;

// ... etc ...

// das Ueberblenden starten
  fade(0,0,1);
  fade(1,0,1);
}

Viel Spaß damit!

Du wird sowieso noch Anpassungen durchfuehren muessen. :-))

Gruß
L00NIX

[Florian Ritzer]

LOL Soll ich Danke oder Danke sagen?

Na jedenfalls Danke!

Mein ergebnis ist recht kümmerlich... Das mit der Zufallszahl ist gegangen! aber der hat dann mit dem fade in einen andren layer gewechselt und das hat nix gebracht :)

Also danke nochmal :)

mfg RiFl

[Cybaer]

Hi,

// diese Browserweiche ist problematisch, da Mozilla inzwischen
  // auch klammheimlich das document.all Modell unterstuetzt

Ist sie nicht, weil Mozilla es eben *klammheimlich* macht. ;-)

Andererseits: Sie ist es trotzdem (wg. anderer Browser). Es sollte halt einfach abgefragt werden, ob filter zur Verfügung steht.

Außerdem sollte nicht MozOpacity verwendet werden, sondern opacity. Ersteres ist nur für ältere Nozillas interessant, letzteres für (prinzipiell) alle Browser.

Gruß, Cybaer

[L00NIX]

Hallo.

Außerdem sollte nicht MozOpacity verwendet werden, sondern opacity.
Ersteres ist nur für ältere Nozillas interessant, letzteres für
(prinzipiell) alle Browser.

Das mag schon sein (ich weiß es nicht), aber ich habe ja lediglich die
Vorlage erweitert und sonst den Code nicht angerührt.

Gruß
L00NIX

[L00NIX]

Hallo.

Was zu deinem Problem... :-)

Andere Option: Den Code so anpassen, dass man ihn paralle
verwenden kann.

Ein paar Anregungen dazu:

Zufallszahlen zwischen ug und og (og > ug) erzeugt du mit

z = Math.floor(Math.random() * (og-ug+1) + ug)

Eine function fade() reicht.

Du kannst einen weiteren Parameter (nämlich die Zeit) übergeben.

Die DIVs könntest du in einem zweidimensionalen Array speichern.
Damit du dann das richtige DIV-Set überblendest, brauchst du nochmal
einen weiteren Parameter, nämlich den Index deines DIV-sets, das
angesprochen werden soll. Du kannst hierfür auch ein assoziatives
Array (Siehe unter
http://de.selfhtml.org/javascript/objekte/array.htm#assoziative_arrays)
benutzen.

Gruß
L00NIX