links öffnen in tables?

[lila]

hallo,

ich habe jetz nach langen suchen nach einer andern möglichkeit beschlossen, eine art bildergalerie mit tables zu machen.
die grundidee ist simpel: ein bild, darüber pfeile um auf das vorherige bzw nächste bild zu kommen.
nur sollte eben nicht ständig eine neue seite geladen werden, sondern sich nur das bild verändern, der rest aber nicht.
da ich dazu nichts gefunden habe, bin ich eben auf tables umgestiegen, und jetzt meine frage:
kann ich es irgendwie einstellen, dass ein link in einer table-zeile geöffnet wird?
also dass ich auf den 'weiter' pfeil klicke zb. und dann erscheint in der spalte darunter das nächste bild...ist das möglich?
ich hoffe ich habe mich verständlich ausgedrückt, schnelle hilfe wäre sehr gut und falls jemand eine andere möglichkeit hat, so eine bildergalerie zu machen, wäre das auch super (also falls es mit tables nicht funktioniert)
lg, lila

[Steel]

Hiho!

Ich verstehe Dich nicht. Was haben den Tabellen mit dem Grundproblem zu tun, Inhalte nicht komplett nachladen zu wollen??

Machen wirs trotzdem kurz: Egal ob mit oder ohne Tabelle muss der Browser natuerlich trotzdem die ganze Zeite neu laden. So funktioniert nunmal das Internet.

Es gibt natuerlich auch Ausnahmen. ;) 2 Davon fallen mir spontan ein und beide beinhalten Javascript. Sollten also mit Bedacht eingesetzt werden.

Variante 1:
Du laedst di komplette Gallerie in deine Datei. Dabei reichen natuerlich schon die Links und nicht die komplettenBilder. Beim hin und herschalten huepfst du einfach durch ein Array in dem die Daten abgelegt sind.

Variante 2:
Du nutzt die wundervollen Moeglichkeiten des Web 2.0 und benutzt Ajax um dir die Daten zu holen und das Dokument wieder im nachinein zu veraendern.

Viel Erfolg.

[panzerkeks]

Hallo miteinander

Ein (i-)frame wäre ebenfalls eine Möglichkeit.

pk

[wahsaga]

hi,

Variante 1:
Du laedst di komplette Gallerie in deine Datei. Dabei reichen natuerlich schon die Links und nicht die komplettenBilder. Beim hin und herschalten huepfst du einfach durch ein Array in dem die Daten abgelegt sind.

Wenn nur Links "geladen" werden, und die Bilder noch nicht - dann muss ja trotzdem jedes Mal eine neue Seite aufgebaut werden (sofern man nicht auf (I)Frames ausweichen möchte).

Variante 2:
Du nutzt die wundervollen Moeglichkeiten des Web 2.0 und benutzt Ajax um dir die Daten zu holen und das Dokument wieder im nachinein zu veraendern.

Wenn es nur um den Austausch von Bildern geht, braucht man kein AJAX (bzw., dabei ist AJAX überhaupt nicht dienlich. Selbst wenn man Bildressourcen damit anfordern würde, besteht kaum eine Möglichkeit, den Browser anschliessend auch zum Anzeigen dieser binären Bilddaten zu bewegen).

Wenn es nur um das reine Austauschen von Bildquellen geht, bietet das Anwedungasbeispiel Dynamische grafische Buttons den brauchbareren Ansatz.

gruß,
wahsaga

[Steel]

Wie's aussieht ist nicht das neu Laden das Problem sondern das Erstellen. (keine serverseitige Sprache?)

[lila]

ich meinte ich möchte nicht für jedes bild eine neue seite anlegen, sondern auf derselben seite bleiben und nur das bild 'austauschen', sozusagen.
die seite ist folgendermaßen aufgebaut:
es gibt ein hintergrundbild, oben ist text und darunter sollte ein bild sein und wenn man auf einen pfeil klickt, sollte das nächste bild kommen und wieder das nächste etc.
und ich kann jetzt keine frames mehr einbauen, da somit die gesamte struktur der hompage kaputt werden würde und ja...
falls es schon mit tables nicht geht, vielleicht hat jemand einen tipp, wie ich das machen könnte

[Steel]

Aha. Hast du denn keine Serverseitige Sprache wie php zur Verfuegung?

Falls nicht musst du, wie frueher uebelich, die Gallerie komplett in HTML erstellen, oder Javascript benutzen muessen.

Hierbei ist es hilfreich zu wissen, wie gross denn die Gallerie sein soll. Sinds nur 5 Bilder oder ist es gar ein grosser Pool der womoeglich noch regelmaessig erweitert wird??

[lila]

Es sind mehrere Galerien mit aber jeweils nur maximal 5 Bildern. Die Galerien werden dann auch nicht mehr erweitert.

Ob ich php zur verfügung habe.. ehrlich gesagt weiss ich es nciht, denke aber schon, wovon hängt das ab?

[Patrick Andrieu]

Hallo lila!

die seite ist folgendermaßen aufgebaut:
es gibt ein hintergrundbild, oben ist text und darunter sollte ein bild sein und wenn man auf einen pfeil klickt, sollte das nächste bild kommen und wieder das nächste etc.

Meinst Du so etwas wie hier? Den Filmausschnitt brauchst Du in dem Fall nicht, nur der obere Teil. Die Buttons lassen sich auch durch Grafiken ersetzen.

Viele Grüße aus Frankfurt/Main,
Patrick

[lila]

Hi patrick,
ja genau so was bräuchte ich.
könntest du erklären, wie man das ca macht, ich arbeite mit dreamweaver und hab leider nicht soo viel ahnung vom eigentlichen code. ein bisschen aber schon also ich bräucht nur die grundzüge.

[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