Tipp: Bild mit Thumbnail verlinken

1. offizieller Beitrag
    • Offizieller Beitrag

    Wie verlinkt man ein Bild mit Thumbnail?


    Dies möchte ich an einem kleinen Beispiel erklären.


    Zuerst das Ergebnis:



    Um solch eine Vorschau zu erhalten muss man folgenden "Code" eingeben:


    Code
    [url=http://www.patrickstauch.de/bilder/penum/K7D_0076.jpg][img]http://www.patrickstauch.de/bilder/penum/K7D_0076_tn.jpg[/img][/url]


    Dieser gliedert sich wie folgt:


    Der erste Teil:


    Code
    [url=http://www.patrickstauch.de/bilder/penum/K7D_0076.jpg]


    enthält den Link zum grossen Bild, der zweite Teil dann:


    Code
    [img]http://www.patrickstauch.de/bilder/penum/K7D_0076_tn.jpg[/img][/url]


    den Link zum Thumbnail.


    In meinem Beispiel liegen dazu 2 Bilder auf meinem eigenen Webspace.


    Bei anderen Bilderdiensten wie Imageshack.us etc. bekommt man meist für solche Verlinkungen einen fertigen Link zur Verfügung gestellt, den man nur mit Copy&Paste hier einfügen muss.


    Hier eine Mini Anleitung für Imageshack.us.


    Bei Aufruf der Internetseite bekommt man diese Maske zu sehen:



    Über den Button bei Punkt 1 kann man auf der Festplatte nach dem Bild suchen, welches hochgeladen werden soll.


    Ist dies erledigt schaut die Maske anschliessend so aus:



    Punkt 2, die E-Mail Adresse ist optional und muss nicht angegeben werden.
    Punkt 3 bringt die weiteren Möglichkeiten zur Bildgrösse zum Vorschein.
    Punkt 4 schliesslich startet das hochladen des Bildes.
    Es erscheint dann (so war es bei mir) ein kleines Hinweisfenster, dass man sich registrieren soll/kann um das Bild später auch wieder löschen zu können.



    Nach erfolgreichem Upload erscheint nun diese Liste von Links:



    Hier sind die Links Nummer 5 "Forum Code" und Nummer 6 "Forum Thumbnail" interessant.


    Während der Code unter Nummer 5 das Bild in seiner vollen Grösse einbindet, erstellt der Code unter Nummer 6 nur ein kleines Thumbnail, welches anklickbar ist und das zum grossen Bild bei Imageshack.us führt.


    Hier der Beispielcode für Nummer 6 "Forum Thumbnail":


    Code
    [URL=http://img833.imageshack.us/i/tigerri.jpg/][IMG]http://img833.imageshack.us/img833/4365/tigerri.th.jpg[/IMG][/URL]


Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]


    Der Part nach dem [/URL] :

    Code
    Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]

    kann entfernt werden, dies setzt nur einen Hinweistext mit Link unter das Thumbnail.


    Bereinigt schaut das dann so aus:


    Code
    [URL=http://img833.imageshack.us/i/tigerri.jpg/][IMG]http://img833.imageshack.us/img833/4365/tigerri.th.jpg[/IMG][/URL]


    Und so das Ergebnis:





    Gruss Patrick