links öffnen in tables?

[Patrick Andrieu]

Hallo lila!

ja genau so was bräuchte ich.

Dachte ich mir ;)

könntest du erklären, wie man das ca macht, ich arbeite mit dreamweaver und hab leider nicht soo viel ahnung vom eigentlichen code.

Das ist aber bei solchen Vorhaben schon von Belang, etwas CSS und etwas mehr JavaScript zu kennen. Denn wenn diese Datei zwar eher quick&dirty erstellt wurde und hier und da noch inline-styles enthält, die zwingend nach Auslagerung schreien, müsstest Du Dich schon mit der Materie soweit befasst haben, dass Du zumindest erkennst, wo oder was Du bei SELFHTML nachschlagen kannst.

Auch würde ich heute einiges anders machen, diese Datei wurde lediglich als Möglichkeit erstellt, meine Roadster-Bilder für die Roadster-Club-Mitglieder zu präsentieren (während die meisten anderen Mitglieder, die ja nicht aus der Webentwicklung-Ecke kommen, ihre Bilder bei Pixum oder Arcor hochladen). Der Code ist also nur als ein Beispiel unter vielen, aber nicht als Lehrbeispiel für "wie man sowas richtig macht" anzusehen ;)

Aber probieren wir's mal:

Zuerst brauchst Du einen Bereich, in dem das erste Bild erscheint. Das ist in meinem Beispiel das DIV mit der ID "show_pic". Das steht einfach nur leer da, sein Inhalt, also das jeweilig anzuzeigende Bild, bekommt er mit JavaScript zugewiesen. Formatiert (z.B Breitenangabe o.Ä.) ist dieses DIV nicht, weil ich Bilder sowohl im Hoch- als auch im Querformat anzeigen lasse.

Das DIV show_pic selbst ist in einem umfassenden DIV showroom eingebettet, dass ein weiteres DIV show_buttons enthält. Wie diese formatiert sind, entnimmst Du dem CSS-Block in der Datei. Wichtig zu wissen, falls Du Dir von diesem Beispiel inspirieren lassen willst: Das DIV showroom ist bei mir auf visibility:hidden gesetzt, und wird erst mittels JavaScript (onload) sichtbar gemacht. Das kannst Du natürlich ändern, da sonst beim Laden der weitere Inhalt nach unten rutscht. Besucher ohne JavaScript bekommen bei meinem Beispiel also nur den Filmstreifen zu sehen, da ohne JavaScript ein Vor- und Zurückblättern nicht realisierbar ist und die Anzeige der Buttons nur irritieren würde.

Für die Buttons waren drei Formulare notwendig, weil jeder Button eine andere Aktion auslöst: Vorblättern (>>), Auruf des ersten Bilds in der Galerie (First) und Zurückblättern (<<). Die Buttons wollte ich alle in einer Zeile, daher die Style-Anweisungen display:inline.

Wie der Container für den Filmstreifen (div id="test") formatiert ist, entnimmst Du, falls Du sowas brauchst, ebenso dem CSS-Block oder den inline-styles.

Das Beispiel braucht Bilder, die fortlaufend durchnummeriert sind. Falls Deine Bilder andere, nicht numerische/alphanumerische Dateinamen haben, kannst Du sie mit IrfanView mittels Batchkonvertierung entsprechend umbenennen - oder manuell, wenn Du wirklich nur 5 Bilder für das Blättern hast. Ferner sind im Beispiel alle Bilder im Format .jpg, man könnte auch .gif oder .png nehmen, aber kein Mix aus allen.

Meine Digitalkamera spuckt Bilder mit Namen wie DSCN1234.jpg aus, andere Kameras vergeben Namen wie CIMG1234.jpg o.Ä.

Und somit sind wir bei der Variablendeklaration im JavaScript-Block. Hier wird zunächst die Variable start mit "0" initialisiert, weiter wird der Bilddateiname auseinander genommen (var npart - soll "name part", Namensteil bedeuten) und die Zahlen des ersten (start_pic) und des letzten (last_pic) Bilds der Galerie diesen Variablen zugewiesen:

  
var start = 0;  
var npart = "DSCN";     // der nicht numerische Namensteil des Bilddateinamens  
var start_pic = 1050;   // Nummer des ersten Bilds  
var last_pic = 1084;    // Nummer des letzen Bilds  
var diff = last_pic - start_pic; // der Wert dieser Variable wird später gebraucht  

Direkt darunter ist eine Funktion definiert, welche die Anweisung für das Sichtbar-Machen des DIV showroom enthält. Diese Funktion ist im Grunde überflüssig, die Anweisung kann man genauso gut zu Beginn der Funktion firstPic() notieren.

Die nächste Funtkion fromFilm() wirst Du nicht brauchen, da Du keinen Filmstreifen einsetzen willst. Interessant ist vielmehr die Funktion getFirst(), die dafür zuständig ist, das erste Bild der Galerie in das DIV showpic beim Klicken des Buttons "First" zu zeigen. Hier siehst Du, wie der Bilddateinamen mittels Zeichenkettenverknüpfung wieder zusammen gesetzt wird: npart + start_pic +".jpg";.

Direkt darunter wird die Funktion definiert, die für das Blättern zuständig ist: function forw(dir). "dir" ist ein Parameter, der beim Klicken auf eins der Button zum Vor- oder Zurückblättern übergeben wird, und kann sowohl 1 (fürs Vorblättern) als auch -1 (fürs Zurückblättern) sein (siehe hierzu den Wert des Attribut action="" in den entsprechenden form-Tags.

  
start = start + dir;          // der Wert von "start" wird erhöht, wenn dir = 1, oder minimiert, wenn dir = -1  
new_pic = start_pic + start;  // die Zahl im Dateinamen des beim Blättern anzuzeigenden Bilds ist die des Startbilds, erhöht um den neuen Wert von "start"  

In den folgenden if-Abfragen wird geprüft, sozusagen "wo wir gerade in der Galerie sind", anschließend wird der neue Dateiname für das src-Attribut wieder zusammen gesetzt und dem DIV show_pic dem ersten seiner Unterelementen (firstChild) zugewiesen: document.getElementById('show_pic').firstChild.src = new_src;. Siehe hierzu firstPic(), was dieses erste Element ist!

Was jetzt kommt und in meinem quick&dirty-Beispiel zuletzt notiert ist, "passiert" beim Scriptablauf eigentlich zuerst:

var img = document.createElement("img"); // Hier wird ein neues img-Element erstellt.

Die darunter folgende Funktion firstPic() initialisiert sozusagen das Ganze, in dem Sie das erstellte img-Element in das DIV show_pic hinzufügt (document.getElementById('show_pic').appendChild(img);), und zwar mit als src-Attribut das erste Bild der Galerie:

  
var first_pic = start_pic + start;  
var first_src = npart + first_pic + ".jpg";  
img.setAttribute("src", first_src);  

ein bisschen aber schon also ich bräucht nur die grundzüge.

Zum Nachschlagen:

http://de.selfhtml.org/javascript/objekte/document.htm
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
http://de.selfhtml.org/javascript/objekte/node.htm#append_child
http://de.selfhtml.org/javascript/objekte/node.htm#first_child

Reicht das? ;) Nur so als Hinweis: Das Script zu schreiben ging schneller, als diese Erläuterungen zu verfassen ;)

Viele Grüße aus Frankfurt/Main,
Patrick