[3.3] Tabelle mit verlinkten Bildern

[Pimboli2404]

Hallo, zusammen,

ich habe in meinem Forum eine Seite, in der Puzzles angeboten werden, die die User online puzzlen können. Wir sind nur 8 User und nur 6 davon puzzlen mit, also überschaubar, so dass ich eine Tabelle angelegt habe, in die ich die Zeiten eintrage, die derjenige gebraucht hat, um das Puzzle zu lösen.
http://g-fans-forum.de/Puzzlebilder/tabelle.jpg
Die Tabelle habe ich mit BBCodes erstellt, so dass ich problemlos weitere Puzzles einfügen kann.

Der BBCode lautet:
<table border="1"><colgroup span="7" bgcolor="#FFFFFF"></colgroup>
<tr>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT1}</b></font></td>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT2}</b></font></td>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT3}</b></font></td>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT4}</b></font></td>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT5}</b></font></td>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT6}</b></font></td>
<td width="100";td style="text-align: center;"><font size="1"><b>{TEXT7}</b></font></td></tr>
</table>

Die einzelnen Puzzles werden als kleine Bilder angezeigt und wenn man darauf klickt, wird das Puzzle geöffnet.
http://g-fans-forum.de/Puzzlebilder/puzzles.jpg

Was mich dabei stört ist, dass das Puzzle im gleichen Tab geöffnet wird. Kann man das irgendwie hinbekommen, dass es in einem neuen Tab geöffnet wird und wenn ja, wie?
Die Zeile, die ich für jedes Puzzle eingebe lautet:
eckige Klammerurl=http://www.g-fans-forum.de/puzzle[Nummer des Ordners]/puzzle.htm] eckige Klammer img]http://www.g-fans-forum.de/Puzzlebilder/[Name des Bildes].jpg[/img][/url]

Das zweite, was ich gern hätte, ist, dass die Vorschau-Bilder nebeneinander angezeigt werden. Ich habe das auch mit BBCodes versucht, ähnlich wie die Tabelle oben, aber entweder bekomme ich kein Bild oder keinen Link oder einen Fehler.

Vielleicht kann mir ja jemand helfen? Bitte bei eventuellen Erklärungen berücksichtigen, dass ich absoluter Anfänger bin und eigentlich überhaupt keine Ahnung von BBCodes und HTML habe.

[Pimboli2404]

Ich habe heute jetzt lange rumprobiert und das mit der Tabelle und den Bildern hinbekommen. Sicher ist das nicht ganz richtig, weil ich den BBCode mit {TEXT} erstellt habe anstatt die URL zu benutzen, aber ich weiß nicht, wie das dann formuliert werden muss, dass die eingegebene URL dann auch als Bild erscheint.
Vielleicht kann mir das mal einer sagen? Das müsste doch mit diesem LOCAL_URL gehen, oder? Weil ja die Fotos alle da gespeichert sind, wo auch das Forum ist?

Jetzt sieht die Tabelle so aus:
http://g-fans-forum.de/Puzzlebilder/tabelle2.jpg

Die Überschriften sind ja klar und für jedes Bild gebe ich dann in den BBCode die komplette URL des Bildes ein. Das immerhin klappt so.
Aber es muss doch auch möglich sein, dass man dann das Bild anklickt und zu der Datei geleitet wird - die liegt ja quasi im Verzeichnis nebenan?

[Pimboli2404]

Ich weiß ja nicht, ob es jemanden interessiert, aber ich habe es geschafft, die Tabelle mit den verlinkten Bildern hinzubekommen.
Sicherlich gibt es da eine bessere Lösung, aber ich sagte ja, dass ich keine Ahnung habe.

Gelöst habe ich es jetzt so:
BBCode:

Code: Alles auswählen

[pubi]{NUMBER1},{TEXT1},{NUMBER2},{TEXT2},{NUMBER3},{TEXT3},{NUMBER4},{TEXT4}[/pubi]

Für Number muss ich nur die Nummer des Ordners und für Text den Namen des Bildes eingeben.

HTML-Ersetzung:

Code: Alles auswählen

<table border="1"><colgroup  span="4" bgcolor="#FFFFFF"></colgroup>
<tr>
<td width="200";td style="text-align: center;"><a href="http://www.g-fans-forum.de/Puzzle{NUMBER1}/puzzle.htm"><img src="http://www.g-fans-forum.de/Puzzlebilder/{TEXT1}.jpg"></a></td>
<td width="200";td style="text-align: center;"><a href="http://www.g-fans-forum.de/Puzzle{NUMBER2}/puzzle.htm"><img src="http://www.g-fans-forum.de/Puzzlebilder/{TEXT2}.jpg"></a></td>
<td width="200";td style="text-align: center;"><a href="http://www.g-fans-forum.de/Puzzle{NUMBER3}/puzzle.htm"><img src="http://www.g-fans-forum.de/Puzzlebilder/{TEXT3}.jpg"></a></td>
<td width="200";td style="text-align: center;"><a href="http://www.g-fans-forum.de/Puzzle{NUMBER4}/puzzle.htm"><img src="http://www.g-fans-forum.de/Puzzlebilder/{TEXT4}.jpg"></a></td></tr>
</table>

[HaioPaio]

Ich habe die ganze Zeit interessiert mitgelesen.
Ich hatte nur leider keinen Rat für dich.

[jan_2012]

Ist sehr interesant

Wie schau das auf mobilen Endgeräten aus?

Mfg Jan

[Pimboli2404]

Ist für's Smartphone natürlich zu breit, da muss man schieben, um das rechte Bild sehen zu können.
http://g-fans-forum.de/Puzzlebilder/Scr ... Puzzle.png
Es ist in diesem Fall allerdings nicht so relevant, weil die Puzzles nicht auf einem mobilen Gerät gelöst werden können, deswegen habe ich auch einfach eine feste Spaltenbreite angegeben.