"float" und "visited": Unklarheiten-Beseitigung erbeten

[juewi]

Hallo!

Auch dank euch hab ich meine Website grundsätzlich fertig.

Jetzt wird ein wenig umgebaut (bin unsicherer Layouter ;-)) und hätte dazu ein paar Fragen betreffend diese Testseite und diesem Stylesheet (grüner Rahmen nur temp. Orientierung und Links verweisen auf meine aktuelle Seite):

FLOAT:
nach ein paar gefloateten divs soll noch eine fusszeile (div mit id "fuss") stehen, welche aber trotz margin-top immer (ausser im IE) an der Unterkante der gefloateten divs hängt. Wie gehört das richtig bzw. hab ich die floats überhaupt richtig eingesetzt??? (befürchte nicht)

VISITED:
Meinen Thumbnails hab ich eine Klasse verpasst ("op"), die einerseits die Deckkraft regelt und bei Hover auch den Rahmen färbt. Nun soll nach "visited" zB ein grüner Rahmen stehenbleiben. Da die Klasse aber für img gilt und nicht für den Link funktioniert das nicht. Geht das überhaupt, dass ich Eigenschaften einer "besuchten/geklickten Grafik" über CSS ändere/zuweise?

ALLGEMEIN:
Wenn euch Dinge auffallen, die ich gröbstens verbockt habe oder etwas zu unschön gemacht habe bitte ich ebenfalls um Meldung ;-) Zumindest valide ist die Seite und die 2 "Fehler" lt. CSS-Validierung sind auch verkraftbar.

Vielen Dank mal im voraus!

LG, Jürgen

[ChrisB]

Hi,

VISITED:
Meinen Thumbnails hab ich eine Klasse verpasst ("op"), die einerseits die Deckkraft regelt und bei Hover auch den Rahmen färbt. Nun soll nach "visited" zB ein grüner Rahmen stehenbleiben. Da die Klasse aber für img gilt und nicht für den Link funktioniert das nicht. Geht das überhaupt, dass ich Eigenschaften einer "besuchten/geklickten Grafik" über CSS ändere/zuweise?

Bilder können nicht "visited" sein, nur Links.
Wenn du Bilder, die innerhalb von Links liegen, die wiederum evtl. "visited" sind, gesondert formatieren möchtest - dann nutze den Nachfahrenselektor.

Wenn euch Dinge auffallen, die ich gröbstens verbockt habe oder etwas zu unschön gemacht habe bitte ich ebenfalls um Meldung

Wozu dient bspw. das leere Div #abstand?
Warum ist die Navigation nicht als Liste ausgezeichnet?

Und was zum Geier soll sowas?

<span style="color: rgb(64, 64, 64);">_______________</span>

Nutze einen Rahmen für ein geeignetes Element, statt solcher Unsinns-Konstrukte.

MfG ChrisB

[juewi]

Bilder können nicht "visited" sein, nur Links.

Hab ich vermutet. Schade.

Wenn du Bilder, die innerhalb von Links liegen, die wiederum evtl. "visited" sind, gesondert formatieren möchtest - dann nutze den Nachfahrenselektor.

Im Normalfall wird hier auch der Link nicht besucht sondern ein Script ausgeführt. Der Link gilt nur bei deaktiviertem JS.
Wie auch immer - die visited-Geschichte bei dem Thumbs lass ich eben.

Wozu dient bspw. das leere Div #abstand?

siehe hier: wird der Viewport kleiner als das div so würden bei negativem margin-Wert Teile des divs ausserhalb des viewports geschoben. Durch diese Methode passiert das nicht.

Warum ist die Navigation nicht als Liste ausgezeichnet?

Wozu immer diese Listen-Manie? Bitte um Aufklärung wo der eklatante Vorteil von ul-li gegenüber text mit Zeilenumbrüchen liegt. Nicht böse gemeint, ich verstehs einfach nicht.

Und was zum Geier soll sowas?
»» <span style="color: rgb(64, 64, 64);">_______________</span>
Nutze einen Rahmen für ein geeignetes Element, statt solcher Unsinns-Konstrukte.

"Unüblich unter Profis" muss nicht gleich Unsinn sein oder?
Wusste einfach nicht, wie ich die gewünschten Unterteilungsstriche anders hinkriegen sollte (hinsichtlich Position und Farbe) ausser mit andersfarbigen Unterstrichen.

[ChrisB]

Hi,

Warum ist die Navigation nicht als Liste ausgezeichnet?
Wozu immer diese Listen-Manie? Bitte um Aufklärung wo der eklatante Vorteil von ul-li gegenüber text mit Zeilenumbrüchen liegt.

Eine Navigation ist eine Auflistung von Links.
Und da wir bemüht sein wollen, die Inhalte, die wir vorliegen haben, mit den beschränkten Möglichkeiten, die HTML uns bietet, bestmöglich zu strukturieren - bietet sich eben dieses Konstrukt dafür stark an.

»» <span style="color: rgb(64, 64, 64);">_______________</span>
Nutze einen Rahmen für ein geeignetes Element, statt solcher Unsinns-Konstrukte.
"Unüblich unter Profis" muss nicht gleich Unsinn sein oder?

Muss nicht, ist hier aber :-)

Wusste einfach nicht, wie ich die gewünschten Unterteilungsstriche anders hinkriegen sollte (hinsichtlich Position und Farbe) ausser mit andersfarbigen Unterstrichen.

Sie sind absolut kein Bestandteil des Inhaltes, also gehören sie auch nicht ins HTML.
Verzierung ist immer Aufgabe von CSS.

MfG ChrisB

[juewi]

Eine Navigation ist eine Auflistung von Links.
Und da wir bemüht sein wollen, die Inhalte, die wir vorliegen haben, mit den beschränkten Möglichkeiten, die HTML uns bietet, bestmöglich zu strukturieren - bietet sich eben dieses Konstrukt dafür stark an.

Ok - ich lass ja mit mir reden ;-) Hab die Navigation mit ul und li nun gelistet.

»» Wusste einfach nicht, wie ich die gewünschten Unterteilungsstriche anders hinkriegen sollte (hinsichtlich Position und Farbe) ausser mit andersfarbigen Unterstrichen.

Sie sind absolut kein Bestandteil des Inhaltes, also gehören sie auch nicht ins HTML.
Verzierung ist immer Aufgabe von CSS.

Und wie mach ich jetzt am schönsten
1. die Leerräume zwischen den Navi-Blöcken (wie 2 Leerzeilen) und
2. die Unterteilungsstriche (wüsste nicht wie mit CSS ...)

LG, Jürgen

[ChrisB]

Hi,

Und wie mach ich jetzt am schönsten

1. die Leerräume zwischen den Navi-Blöcken (wie 2 Leerzeilen) und

Für Abstände sind margin und padding zustädnig.

2. die Unterteilungsstriche (wüsste nicht wie mit CSS ...)

Schrieb ich doch schon - geeigneten Elemente Rahmen verpassen.

MfG ChrisB

[juewi]

Für Abstände sind margin und padding zustädnig.
Schrieb ich doch schon - geeigneten Elemente Rahmen verpassen.

MfG ChrisB

Danke vielmals - hab´s nun gerafft ;-) Ich gebs zu: sieht codemäßig besser aus.

Sonst noch welche Abnormitäten in meinem Aufbau?

LG, Jürgen

[Patrick Andrieu]

Hallo juewi!

Ich gebs zu: sieht codemäßig besser aus.

Hättetst Du damals die Beispiele studiert, die wir Dir gaben, und bei evtl. Nichtverstehen nachgefragt, was im Code wozu zuständig ist, wärst Du schon lange fertig ;)

Dort gab es bereits zwei Listen, die durch einen Rahmen (border-top) getrennt sind.

Sonst noch welche Abnormitäten in meinem Aufbau?

Ich würde eine Funktion schreiben, um die vielen »onclick« im Code nicht notieren zu müssen. Schau Dir noch mal das alte Beispiel an!

• den Thumbs-Links eine Klasse verpassen (z.B. »thumbs«: <a class="thumbs" ...>)
• im JavaScript diese Links ansprechen:

       var a = document.links;  
       for (var i = 0; i < a.length; i++) {  
         if (a[i].className == 'thumbs') {  
           a[i].onclick = function() {  
             var name = this.href;  
             tausch(name);  
             return false;  
           }  
         }  
       }

»document.links« sammelt alle Links im Dokument in einer »Collection«. In der Schleife werden alle Links durchgelaufen, und nur für diejenigen mit der Klasse »thumbs« wird eine Funktion für den Klick-Event definiert.

Der reinen Prettyheit (!) des Codes wegen würde ich nicht so viele Leerzeilen machen...

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Hättetst Du damals die Beispiele studiert, die wir Dir gaben, und bei evtl. Nichtverstehen nachgefragt, was im Code wozu zuständig ist, wärst Du schon lange fertig ;)
Dort gab es bereits zwei Listen, die durch einen Rahmen (border-top) getrennt sind.

Es sei mir verziehen, zur damaligen Diskussion war ich noch überwiegend mit der Erfassung des Scripts ausgelastet und hab mir die CSS-Codierung einfach nicht angeschaut bzw. verstehe ich davon vieles erst JETZT. Ich lerne zwar schnell aber in kleinen Dosen ;-)

Ich würde eine Funktion schreiben, um die vielen »onclick« im Code nicht notieren zu müssen. Schau Dir noch mal das alte Beispiel an!

• den Thumbs-Links eine Klasse verpassen (z.B. »thumbs«: <a class="thumbs" ...>)
• im JavaScript diese Links ansprechen:

var a = document.links;

for (var i = 0; i < a.length; i++) {
         if (a[i].className == 'thumbs') {
           a[i].onclick = function() {
             var name = this.href;
             tausch(name);
             return false;
           }
         }
       }

>   
> »`document.links`{:.language-javascript}« sammelt alle Links im Dokument in einer »Collection«. In der Schleife werden alle Links durchgelaufen, und nur für diejenigen mit der Klasse »thumbs« wird eine Funktion für den Klick-Event definiert.  

Darf ich das für mich versuchen laienhaft zu erklären?  
- document.links = JS-eigenes Objekt, dass Links im HTML-Code rausliest; wird der Variable "a" zugewiesen  
- mit Zähler "i" wird die Schleife solange durchlaufen bis alle (?) Links im HTML-Code durchlaufen sind? Jeder Link bekommt mit "i" eine Zahl und kann dann damit angesprochen werden?  
- wenn der Link "blabla.at" nun eine Klasse "thumb" hat führe hier durch "onclick" eine Funktion aus, IN DER wiederum die Funktion "tausch" ausgeführt wird und der das Linkziel mit "this.href" mitgegeben wird.  
- "return false" damit bei aktiviertem JS der Link selbst NICHT ausgeführt wird sondern eben die Funktion "tausch"  
- aber WANN und WODURCH und WIE OFT soll dieses Script denn ausgeführt werden?  
  
Tja ... und jetzt zerreisst mich in der Luft ;-)  
  
  

> Der reinen Prettyheit (!) des Codes wegen würde ich nicht so viele Leerzeilen machen...  

Naja, das ist nur für das Entwicklungsstadium für mich zwecks besserer Lesbarkeit im normalen Editor. Wird nach Fertigstellung verschlankt, ganz sicher.  
  

> Viele Grüße aus Frankfurt/Main,  
> Patrick  

Ebensolche retour aus Graz  
LG, Jürgen

[Patrick Andrieu]

Hallo juewi!

Ich lerne zwar schnell aber in kleinen Dosen ;-)

Hauptsache, Du lernst was ;)

Darf ich das für mich versuchen laienhaft zu erklären?

Ja. Aber zuerst kannst Du die Zeile:

var name = this.href;

streichen (hätte mir auffallen müssen) und direkt:

tausch(this.href);

notieren. Der Code bleibt dennoch verständlich. Dagegen spart:

a = document.links;

Tipparbeit (wenn es in weiteren Code-Teilen noch mal gebraucht wird). Die Wahl des Variablennames »a« erinnert auch irgendwie ans a-Element für Links.

• document.links = JS-eigenes Objekt, dass Links im HTML-Code rausliest; wird der Variable "a" zugewiesen

Right.

• mit Zähler "i" wird die Schleife solange durchlaufen bis alle (?) Links im HTML-Code durchlaufen sind?

Ja.

Jeder Link bekommt mit "i" eine Zahl und kann dann damit angesprochen werden?

Besser: aus dem Link-Array wird jeder Link durch den Index angesprochen. Angefangen wird bei 0 (wie meistens in der Programmierung). Kopier das in die Adresszeile Deines Browsers bei eben dieser Seite:

javascript:alert(document.links[0]);

Du erhälst den ersten Link im Dokument, nämlich der ganz oben befindliche Backlink zum Forum ;)

• wenn der Link "blabla.at" nun eine Klasse "thumb" hat führe hier durch "onclick" eine Funktion aus, IN DER wiederum die Funktion "tausch" ausgeführt wird und der das Linkziel mit "this.href" mitgegeben wird.

Genau.

• "return false" damit bei aktiviertem JS der Link selbst NICHT ausgeführt wird sondern eben die Funktion "tausch"

Genau.

• aber WANN und WODURCH und WIE OFT soll dieses Script denn ausgeführt werden?

Wann: sobald geklickt wird (auf einem Link der Klasse »thumbs«.
Wodurch: Dadurch, dass das Skript eben so geschrieben wurden, eben dies zu machen ;)
Wie oft: sooft auf einem Link der Klasse »thumbs« geklickt wird - das ist eben das Ziel dieser Funktion ;)

Ebensolche retour aus Graz

Wie lange noch bis zum ersten Windel-Wechseln?

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Hallo Patrick!

Kopier das in die Adresszeile Deines Browsers bei eben dieser Seite:
javascript:alert(document.links[0]);
Du erhälst den ersten Link im Dokument, nämlich der ganz oben befindliche Backlink zum Forum ;)

cool ...

»» - aber WANN und WODURCH und WIE OFT soll dieses Script denn ausgeführt werden?

Wann: sobald geklickt wird (auf einem Link der Klasse »thumbs«.
Wodurch: Dadurch, dass das Skript eben so geschrieben wurden, eben dies zu machen ;)
Wie oft: sooft auf einem Link der Klasse »thumbs« geklickt wird - das ist eben das Ziel dieser Funktion ;)

Seh ich das richtig, dass die for-Schleife einfach mit Seitenaufruf durchlaufen wird bis jeder Link einen Index verpasst bekommt? Frage nur, da es ja keine Funktion ist die gestartet wird sondern das Script einfach mit der Schleife beginnt = leichtes Verständnisproblem ;-)

Wie lange noch bis zum ersten Windel-Wechseln?

An(bzw. Nieder)kunft wird täglich erwartet. Offizieller Countdown 7 Tage.

[Patrick Andrieu]

Hallo juewi!

cool ...

Bald wirst Du Struppis bester Freund (JavaScript ist cool) ;)

Frage nur, da es ja keine Funktion ist die gestartet wird sondern das Script einfach mit der Schleife beginnt = leichtes Verständnisproblem ;-)

Hm ja, da fehlt noch ein window.onload. Sonst wird der Code sofort ausgeführt, aber document.links bleibt leer, weil »tausch.js« im head-Bereich notiert ist, also eingelesen wird bevor das restliche Dokument zur Verfügung steht...

So könnte jetzt Deine tausch.js aussehen:

       var a = document.links;  
       window.onload = function() {  
         for (var i = 0; i < a.length; i++) {  
           if (a[i].className == 'th') {  
             a[i].onclick = function() {  
               document.aktuelles_foto.src= this.href;  
               return false;  
             }  
           }  
         }  
       }

Dafür gehören alle onclick="tausch(this.href); return false" raus.

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Hm ja, da fehlt noch ein window.onload. Sonst wird der Code sofort ausgeführt, aber document.links bleibt leer, weil »tausch.js« im head-Bereich notiert ist, also eingelesen wird bevor das restliche Dokument zur Verfügung steht...

So könnte jetzt Deine tausch.js aussehen:

var a = document.links;

window.onload = function() {
         for (var i = 0; i < a.length; i++) {
           if (a[i].className == 'th') {
             a[i].onclick = function() {
               document.aktuelles_foto.src= this.href;
               return false;
             }
           }
         }
       }

>   
> Dafür gehören alle `onclick="tausch(this.href);`{:.language-html} return false" raus.  
  
Spitzenklasse! Funktioniert ausgezeichnet!  
Und Deine Anmerkung mit der Einlesen-Problematik ist auch Gold wert, an sowas verzweifeln sicherlich viele Anfänger.  
  
Anm. d. Autors: mit JS und CSS herumspielen is voll lustich. Das Kind im Manne schlägt durch ;-)  
Ich denke, so langsam komm ich dem Endprodukt nahe ...  
  
Aber für mein Verständnis wieder eine Nachfrage: \*duck\*  
wenn ich das Script als zB Funktion "linkindex" einsetze - ginge dann nicht auch der Aufruf über "body onload"? Wo ist der Unterschied zu window.onload?

[Patrick Andrieu]

Hallo juewi!

Aber für mein Verständnis wieder eine Nachfrage: *duck*
wenn ich das Script als zB Funktion "linkindex" einsetze -

Jetzt zweifle ich an meinem Verständnis, wie meinen?

ginge dann nicht auch der Aufruf über "body onload"? Wo ist der Unterschied zu window.onload?

Grundsätzlich keinen. Den Event »onload« gibt es ja nur ein Mal. Doch alles in die JavaScript-Datei zu packen befreit Deinen HTML-Code von einer unschönen Vermischung HTML/JavaScript.

Hier im letzten Beispiel wird window.onload eine anonyme Funktion zugewiesen, welche ja über document.links iteriert und denjenigen Links mit der Klasse xy wiederum mittels onclick eine Funktion zuweist.

Möchtest Du stattdessen den onload-Event über das gleichnamige HTML-Attribut feuern, dann müsstest Du der Funktion wieder einen Namen geben:

        var a = document.links;  
        function tausch() {  
          for (var i = 0; i < a.length; i++) {  
            if (a[i].className == 'th') {  
              a[i].onclick = function() {  
                document.aktuelles_foto.src= this.href;  
                return false;  
              }  
            }  
          }  
        }

und im HTML:
<body onload="tausch();">

Aber die Variante ohne HTML-Attribut ist natürlich schöner. Etwas kompliziert wird es, wenn Du weitere Skripte einbindest, die ebenfalls auf das fertige Laden der Seite angewiesen sind, und also auch window.onload im Code haben. Aber auch dafür gibt es Lösungen, nach denen Du uns dann fragst, wenn Du ein bisschen weiter bist ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Grundsätzlich keinen. Den Event »onload« gibt es ja nur ein Mal. Doch alles in die JavaScript-Datei zu packen befreit Deinen HTML-Code von einer unschönen Vermischung HTML/JavaScript.

Das hab ich bemerkt, dass die Berührung mit dem body-tag so nicht notwendig ist. Ok, danke für die Info

Aber die Variante ohne HTML-Attribut ist natürlich schöner. Etwas kompliziert wird es, wenn Du weitere Skripte einbindest, die ebenfalls auf das fertige Laden der Seite angewiesen sind, und also auch window.onload im Code haben. Aber auch dafür gibt es Lösungen, nach denen Du uns dann fragst, wenn Du ein bisschen weiter bist ;)

Das ist aber sehr nett! Da riskier ich gleich eine dicke Lippe und frag JETZT gleich nach ;-) (Ist aber kein must-have für mich):

Ich versuch gerade mit alert(i) rauszubekommen, welcher Index gerade angesprochen wird um damit eventuell noch ein "vor" und "zurück" einzubauen, mit dem der User - unabhängig, welches Foto gerade aktiv ist - die Fotos durchblättern kann. Irgendwie ergibt "i" aber immer die Summe aller Links?

Wie kann ich das aktuell verwendete "i" nun für diese Blätter-Funktion benutzen und wo setze ich an? Mit onclick-Eventhander auf "vor" und "zurück" nehm ich an?

[Patrick Andrieu]

Hallo juewi!

Irgendwie ergibt "i" aber immer die Summe aller Links?

Dsa kommt drauf an, wo Du die alert()-Anweisung notierst... Notierst Du sie _nach_ der Schleife, hat i den Wert, der zum Abbruch der Schleife führt, nämlich den Wert von document.links.length. Das ist nämlich die Abbruchbedingung: i < a.length

Nehmen wir also an, ein Dokument enthält 20 Links. Wir iterieren über die Collection document.links mit einer http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife:

var a = document.links;
        function tu_was() {
          for (var i = 0; i < a.length; i++) {
            a[i].style.color = 'blue';
          }
        }

i wird solange inkrementiert, bis es gleich a.length ist (20). Dann stimmt die Abbruchbedinung: i < a.length nicht mehr. Die Schleife bricht ab, i hat den Wert 20.

Dass es vom ersten bis zum letzten Link doch klappt: es werden genau 20 Links durchlaufen, nämlich von Link Nr. 0 bis Link nr. 19.

Daher, wo hast Du die alert-Meldung eingebaut?

noch ein "vor" und "zurück" einzubauen, mit dem der User - unabhängig, welches Foto gerade aktiv ist - die Fotos durchblättern kann.

Dafür bräuchtest Du eine weitere Funktion. Um sie zu realisieren, gibt es zwei Ansätze. Wenn Die Bilder durchlaufend ohne Unterbrechung nummeriert sind, kannst Du direkt mit dem Bilddateinamen arbeiten, das ist hier:

http://www.atomic-eggs.com/roadster/20040228/index2.shtml

der Fall.

Wenn nicht, müsstest Du alle Bilddateinamen in einem Array packen, und zwar in der Reihenfolge, wie sie auch in deinem Div verlinkt sind, das ist hier:

http://www.atomic-eggs.com/roadster/wreise.shtml

der Fall (auch wenn die Bilder durchlaufend numeriert sind, nutzt diese Variante ein Array).

Dann je nach Richtung +1 für forward und -1 für backward zum Index (oder im ersten Fall, zum Bilddateinamenspart) addieren.

Viele Grüße aus Frankfurt/Main,
Patrick

[juewi]

Nehmen wir also an, ein Dokument enthält 20 Links. Wir iterieren über die Collection document.links mit einer http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife:

var a = document.links;
        function tu_was() {
          for (var i = 0; i < a.length; i++) {
            a[i].style.color = 'blue';
          }
        }

i wird solange inkrementiert, bis es gleich a.length ist (20). Dann stimmt die Abbruchbedinung: i < a.length nicht mehr. Die Schleife bricht ab, i hat den Wert 20.

Also: erhöhe "i" von 0 ausgehend um 1 solange "i" kleiner als die Anzahl der Links ist. Bei jedem Schleifendurchlauf wird nach der Reihe jedem Link die Farbe blau verpasst. Richtig?

Daher, wo hast Du die alert-Meldung eingebaut?

So:

  
var a = document.links;  
window.onload = function() {  
for (var i = 0; i < a.length; i++) {  
  if (a[i].className == 'fotolink') {  
    a[i].onclick = function() {  
      document.aktuelles_foto.src= this.href;  
      alert("aktueller Link: " + this.href + "; dazugehöriger Index: " + i);  
      return false;  
      }  
    }  
  }  
}

Bau ich den Code woanders ein nehm ich die Schleife mit und die Alerts laufen von 0 - 55 (sind 56 Links) bei Seitenaufruf durch. Komm gedanklich auch nicht mit, an welcher Stelle jetzt das gerade aktive "i" erreicht werden kann. Das jeweilige Linkziel wird über this.href korrekt angezeigt, daneben aber immer nur die Summe aller Links. ?

»» noch ein "vor" und "zurück" einzubauen, mit dem der User - unabhängig, welches Foto gerade aktiv ist - die Fotos durchblättern kann.

Dafür bräuchtest Du eine weitere Funktion. Um sie zu realisieren, gibt es zwei Ansätze. Wenn Die Bilder durchlaufend ohne Unterbrechung nummeriert sind, kannst Du direkt mit dem Bilddateinamen arbeiten, das ist hier:
http://www.atomic-eggs.com/roadster/20040228/index2.shtml
der Fall.

Alle Fotos sind von 001 weg aufsteigend benannt wobei ich mich erinnere dass die führenden Nullen hier ein Problem ergeben und ich eher von 1001 beginnen sollte. Hiesse wieder Massen-Umbenennungen aber ich seh mir Dein Beispiel ein weiteres mal an und hoffe, ich verstehs ;-)

[Struppi]

» Daher, wo hast Du die alert-Meldung eingebaut?

So:

var a = document.links;
window.onload = function() {
for (var i = 0; i < a.length; i++) {
  if (a[i].className == 'fotolink') {
    a[i].onclick = function() {
      document.aktuelles_foto.src= this.href;
      alert("aktueller Link: " + this.href + "; dazugehöriger Index: " + i);
      return false;
      }
    }
  }
}

>   
> Bau ich den Code woanders ein nehm ich die Schleife mit und die Alerts laufen von 0 - 55 (sind 56 Links) bei Seitenaufruf durch. Komm gedanklich auch nicht mit, an welcher Stelle jetzt das gerade aktive "i" erreicht werden kann.  
  
Das Problem ist, dass wenn du die Funktion aufrufst (onclick) die Schleife ja schon lange, lange fertig ist, also i = a.length ist. Um dieses Problem zu umgehen gibt es mehrere Möglichkeiten, die verständlichste für Anfänger dürfte sein, wenn du dem Objekt den Index übergibst.  
~~~javascript
   if (a[i].className == 'fotolink') {  
     a[i]._index_ = i;  
     a[i].onclick = function() {  
          alert(this._index_);  
...

In dem fall musst du aber aufpassen, dass die Bezeichnung nicht mit einem benötigten oder vorhandenen Attribut kollidiert.

Ich bin aber sicher, du brauchst den Index gar nicht. Aber ich habe jetzt nicht alles gelesen um zu sehen was du genau vor hast.

Struppi.

[juewi]

Das Problem ist, dass wenn du die Funktion aufrufst (onclick) die Schleife ja schon lange, lange fertig ist, also i = a.length ist.

Genau - egal wo ich im Script ein alert einbaue wird entweder nur die Endsumme angezeigt oder ich bekomme für jeden Schleifendurchlauf eine alert-Meldung und muss bis zum Schleifenabbruch bestätigen.

Um dieses Problem zu umgehen gibt es mehrere Möglichkeiten, die verständlichste für Anfänger dürfte sein, wenn du dem Objekt den Index übergibst.

if (a[i].className == 'fotolink') {

a[i].index = i;
     a[i].onclick = function() {
          alert(this.index);
...

  
OK - hat geklappt! -> [test](http://www.juergen-wiedner.at/menschen1.html)  
  

> Ich bin aber sicher, du brauchst den Index gar nicht. Aber ich habe jetzt nicht alles gelesen um zu sehen was du genau vor hast.  

Das Script ermöglicht durch Klick auf Thumbnails das jeweilige Linkziel (Grafik) direkt in der Seite anzuzeigen und greift dazu auf den zugewiesenen Index "i" zu.  
Nun möchte ich den gerade aktiven Index "i" (= User hat ein Thumbnail angeklickt) dazu verwenden um auch mit vor/zurück ein BLÄTTERN in der Galerie zu ermöglichen und würde dazu den jeweiligen Index eben um 1 erhöhen oder vermindern. Sofern ich "i" halt dementsprechend auslesen kann ...  
  
(Wenigstens das CSS hab ich dazu mal geschafft - zwar noch ohne Funktion, sieht aber nett aus ;-))  
  

> Struppi.  

Danke Dir erstmal!

[Patrick Andrieu]

Hallo juewi!

»» Aber die Variante ohne HTML-Attribut ist natürlich schöner. Etwas kompliziert wird es, wenn Du weitere Skripte einbindest, die ebenfalls auf das fertige Laden der Seite angewiesen sind, und also auch window.onload im Code haben. Aber auch dafür gibt es Lösungen, nach denen Du uns dann fragst, wenn Du ein bisschen weiter bist ;)
Das ist aber sehr nett! Da riskier ich gleich eine dicke Lippe und frag JETZT gleich nach

Oh, das wollte ich auch noch beantworten... Da es das onload-Event nur ein Mal gibt, und Du verschiedene Skripte mittels <script src="..." type="text/javascript"></script> einbindest, die window.onload nutzen, würde das zuletzt eingebundene »gewinnen«. Wie man das unterbindet, erklärt Felix Riesterer in seinem Fader-Framework.

Hm, bist Du da durch bist, ist Dein Junge schon da *SCNR*

Viele Grüße aus Frankfurt/Main,
Patrick

[GermanysNextTopfmodel]

1. die Leerräume zwischen den Navi-Blöcken (wie 2 Leerzeilen) und
2. die Unterteilungsstriche (wüsste nicht wie mit CSS ...)

Unterteile deine Navi in mehrere listen (ul) ,pro block eine.
weise den ul eine border, ein margin und ein padding zu.

GermanysNextTopfmodel

[juewi]

»» 1. die Leerräume zwischen den Navi-Blöcken (wie 2 Leerzeilen) und
»» 2. die Unterteilungsstriche (wüsste nicht wie mit CSS ...)
Unterteile deine Navi in mehrere listen (ul) ,pro block eine.
weise den ul eine border, ein margin und ein padding zu.

GermanysNextTopfmodel

Yeahhh! Danke vielmals! Wahnsinn, was da alles geht - sieht codemäßig doch irgendwie aufgeräumter aus ;-)

---

Da Du ja gerade beim Super-Tipps-Geben bist: Sind meine float-Definitionen für "thumbliste", "navi" und "fotobox" in Ordnung? Oder missbrauche ich da wieder unbewusst eine zufällig passende Codierung?

LG, Jürgen

[juewi]

was mir auch wichtig ist, wär die Gewissheit dass ich bei dem "float"-Zeugs nicht Mist gebaut habe:

Könnte wer mal nachschauen, ob die 3 divs richtig gefloatet sind??

• "navi" (mit float:left an die "hauptbox" links angedockt)
• "thumbliste" (mit float:right an die "hauptbox" rechts angedockt)
• "fotobox" (soll eigentlich mittig in der "hauptbox" genau zwischen "navi" und "thumbliste" liegen - hab ich mit float:left an das div "navi" angeschlossen mangels Alternative -> richtig oder falsch?)

(Und jedes div dass danach wieder UNTERHALB angeschlossen werden soll muss mit clear: left/right/both bereinigt werden?)

Danke!