pet: thumbnail-galerie verlinken

Hallo,

ich befasse mich mit HTML und CSS seit sehr kurzer Zeit und bin gerade an meine Grenzen gestoßen.Selfhtml und Googeln half auch nicht weiter.

Ich möchte auf meiner Homepage eine Galerie (bin Graphikerin) mit Thumbnails rechts und einer Bild-Vollansicht zentriert haben.

Wie ist es ohne Javascript möglich, die Thumnails mit den Vollbildern zu verlinken, ohne das für das Vollbild ein neues Fenster aufgeht?

Ich habe mit target und anker rumexperimentiert, hat aber nicht funktioniert.

Vielen Dank für Euere Antworten.
Pet

  1. Om nah hoo pez nyeetz, pet!

    Wie ist es ohne Javascript möglich, die Thumnails mit den Vollbildern zu verlinken, ohne das für das Vollbild ein neues Fenster aufgeht?

    ohne Javascript garnicht[1]. Die Entscheidung neues Fenster oder nicht hat ohnehin der Nutzer. Du solltest deshalb das target-Attribut meiden.

    Wenn du allerdings Lösungen wie diese suchst, bist du mit beispielsweise lightbox gut bedient.

    [1]Es gäbe auch reine CSS-Lösungen, dazu muss man aber wissen, was genau du möchtest.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Hallo Matthias,

      die Lösung mit lightbox ist es nicht.

      Ich möchte die Thumbnails wirklich sehr klein (60x60px) als Ausschnitt des Vollbildes. Ich möchte auf jeden Fall vermeiden, daß ein neues Fenster aufgeht, da ich es persönlich extrem nervig finde.

      Unter http://www.2agenten.com/2ag_artists/43/andrea-ventura/1700 sieht man gut, was ich möchte, nur das sie statt Thumbnails eine Liste benutzt haben.

      Ich würde CSS vorziehen, denn das kann ich schon etwas, Javascript dagegen ist völliges Neuland.

      Wie würde es denn im CSS aussehen?

      Danke.

      Pet

      1. Hi!

        Naja. auf der von Dir verlinkten Seite wird bei jedem Klick einen eue Ressource geladen die das entsprechende Bild enthaelt. Mehr oder weniger oldscool. Das "neue Ressource" uss aber nicht heissen, dass fuer jedes Bild eine eigene HTML Datei existiert. Ein PHP-Skript, das Parameter uebergeben bekommt und immer wieder aufgerufen wird geht auch. Das ganze findet dann serverseitig statt. Eine Serverseitige Loesung waere genau, was ich auch machen wuerde. Aber wenn Du kein JS schreiben willst, dann kann man wohl davon ausgehen, dass Du auch keine Lust hast, dich mit einer Serverseitigen Sprache auseinanderzu setzen.

        Ein fertiges Script (meinetwegen Lightbox) kommt warum nicht in Frage?

        --
        Signaturen sind blöd!
        1. Hi steel,

          ein fertiges Script kommt sehr wohl in Frage (wäre sogar mehr als willkommen), nur eben keins, bei dem ein extra Fenster geöffnet wird.

          Öffnet sich bei Lightbox nicht immer ein neues Pop-up Fenster?

          Welches Script würdest Du empfehlen? Danke.

          Viele Grüße
          Pet

          1. Om nah hoo pez nyeetz, pet!

            ein fertiges Script kommt sehr wohl in Frage (wäre sogar mehr als willkommen), nur eben keins, bei dem ein extra Fenster geöffnet wird.

            »»

            Öffnet sich bei Lightbox nicht immer ein neues Pop-up Fenster?

            Du hast dir mein Beispiel also nicht angeschaut.

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. Hallo Matthias,

              Om nah hoo pez nyeetz, pet!

              ein fertiges Script kommt sehr wohl in Frage (wäre sogar mehr als willkommen), nur eben keins, bei dem ein extra Fenster geöffnet wird.
              »»
              Öffnet sich bei Lightbox nicht immer ein neues Pop-up Fenster?

              Du hast dir mein Beispiel also nicht angeschaut.

              Klar habe ich es mir angeschaut. Aber da öffnet sich eben ein Fenster. Aber ich weiß nicht, ob das bei Lightbox zwingend so sein muß. Tut mir leid, aber bis vor kurzem habe ich mich mit solchen Dingen überhaupt nicht befaßt. Was ich jetzt nachhole. Nicht böse sein, wenn ich komische Fragen stelle.
              Viele Grüße
              pet

              1. Om nah hoo pez nyeetz, pet!

                Klar habe ich es mir angeschaut. Aber da öffnet sich eben ein Fenster.

                Es sollte sich eigentlich kein Fenster öffnen, sondern der Inhalt wird abgedunktelt und das Bild dargestellt.

                Matthias

                --
                1/z ist kein Blatt Papier.

                1. Hallo Matthias,

                  Klar habe ich es mir angeschaut. Aber da öffnet sich eben ein Fenster.

                  Es sollte sich eigentlich kein Fenster öffnen, sondern der Inhalt wird abgedunktelt und das Bild dargestellt.

                  ... und es wirkt wie ein neues Fenster.

                  Darum haben die lästigen CSS-Popups (nichts anderes sind sie) die genauso lästigen Javascript-Popups mittels window.open(), was sich leicht abfangen läßt, erfolgreich verdrängt.

                  Freundliche Grüße

                  Vinzenz

                  1. Hallo Vinzenz,

                    jetzt mache ich schon wieder ewig rum und etwas ist immer noch falsch:

                    <a href="image_tipsy.jpg" id="imagetipsy" alt="Tipsy Ritzenhoff" width="600" height="300" >
                    <img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60">
                    </a>

                    <a href="thumbnail_romeo.jpg" id="thumbnailromeo" onclick="imagetipsy"; return false; alt="Thumbnail Elephant Romeo" width="60" height="60">
                    </a>

                    Wo ist mein Fehler? Fehlt da irgenwo alert oder value? Und wenn ja, wo muß es hin? Der Editor rebeliert hinter dem "imagetipsy" vom onclick. Durchs Validieren bin ich auch nicht schlauer geworden.

                    Oder muß ich im im head javascript angeben?

                    Das Thumbnail ist zwar verlinkt mit dem Vollbild, Browser zeigt das Vollbild aber immer noch im neuen Fenster. Warum????

                    Viele Grüße
                    Pet

                    1. Hallo,

                      jetzt mache ich schon wieder ewig rum und etwas ist immer noch falsch:

                      ewig? Kann gar nicht sein. Du hast doch erst heute angefangen. Erwartest Du von Dir selbst, auf Anhieb eine Meisterin zu sein? Hoffentlich nicht.

                      <a href="image_tipsy.jpg" id="imagetipsy" alt="Tipsy Ritzenhoff" width="600" height="300" >
                      <img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60">
                      </a>

                      <a href="thumbnail_romeo.jpg" id="thumbnailromeo" onclick="imagetipsy"; return false; alt="Thumbnail Elephant Romeo" width="60" height="60">
                      </a>

                      ganz schlau werde ich daraus nicht. Ich erläutere noch einmal kurz meinen Vorschlag:

                      Du hast ein Element, in dem Dein Vollbild dargestellt werden soll. Damit Du das Bildelement identifizieren kannst, vergibst Du diesem Zielelement eine id:

                      <img id="Vollbild" src="" alt="Vollbildanzeige">

                      Deine Thumbnails verlinkst Du, z.B.

                      <a href="image_tipsy.jpg"><img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60"></a>  
                      
                      

                      Damit beim Anklicken des Links bei aktiviertem Javascript an entsprechender Stelle das Vollbild angezeigt wird, nutzen wir den Handler onclick. Wir rufen dabei eine Funktion auf (die Du z.B. im head-Bereich in einem script-Element einbinden kannst). Diese Funktion heißt

                      anzeigenVollbild

                      Ihr übergeben wir einen Funktionsparameter, den Wert des href-Attributs des angeklickten Links:

                      <a href="image_tipsy.jpg" onclick="anzeigenVollbild(this.href)"><img src="thumbnail_romeo.jpg" id="thumbnailromeo" alt="Thumbnail    Elephant Romeo" width="60" height="60"></a>  
                      
                      

                      Wir müssen darauf achten, dass der onclick-Handler den Wert false zurückliefert, damit dem Link nicht gefolgt wird.

                      Nun zur Funktion selbst:

                      // Die Funktion erhält die url des anzuzeigenden Bildes  
                      // Das Bild soll in dem Element mit der id="Vollbild" angezeigt werden.  
                      function anzeigenVollbild(url) {  
                          // Wir verschaffen uns über die id des Zielelementes Zugriff auf dieses  
                          var target = document.[ref:self812;javascript/objekte/document.htm#get_element_by_id@title=getElementById]("Vollbild");  
                        
                          // Wir müssen das src-Attribut dieses Elementes setzen  
                          // und zwar mit dem übergebenen Wert, dem Wert des href-Attributs  
                          // des angeklickten Links  
                          target.[ref:self812;javascript/objekte/images.htm#src@title=src] = url;  
                        
                          // Nun müssen wir noch den boolschen Wert false zurückgeben,  
                          // damit der Link nicht ausgeführt wird  
                          return false;  
                      }  
                      
                      

                      Die ersten beiden Zeilen kann man auch zusammenfassen und auf die Variable target einfach verzichten, unkommentiert der von mir angekündigte Zweizeiler:

                      function anzeigenVollbild(url) {  
                          document.getElementById("Vollbild").src = url;  
                          return false;  
                      }  
                      
                      

                      Ich hoffe, Du siehst, dass Du diese Funktion mit dem immer gleich bleibenden Aufruf

                      onclick="anzeigenVollbild(this.href)"

                      jedem Deiner Links um die Thumbnails mitgeben kannst, ohne irgendetwas ändern zu müssen. Das

                      this.href

                      sorgt dafür, dass stets der Wert des href-Attributs des angeklickten Links an die Funktion übergeben wird.

                      Kommst Du damit weiter? Wenn ja, dann kannst Du den nächsten Schritt unternehmen. Wenn nein, dann sag bitte, wo Du hängengeblieben bist. Ich denke, Du solltest den Unterschied zu Deinen Versuchen erkennen können.

                      Freundliche Grüße

                      Vinzenz

                      1. Hallo Vinzenz,

                        vielen dank für die Anleitung. Ich sehe meinen Fehler, offenbar dachte ich, es wäre einfacher und ich müßte alle Infos auf einmal zusammenpacken.

                        Ich werde es heute nach Deiner schönen Anleitung versuchen und mich wieder melden.

                        Viele Grüße
                        pet

                        PS: Ja, leider neige ich zum Perfektionismus (so sehen meine HTML/CSS leider im Moment nicht aus, was mich grämt und ich werde mir bald in meinem "Little boxes" Buch das Kapitel "Ordnung halten im Stylesheet" vornehmen.) und erwarte von mir schnell brauchbare Resultate.
                        Jetzt muß ich leider einkaufen, meine Kinder brauchen Essen.

                      2. Hallo,

                        da bin ich schon wieder. Ich habe versucht, alles nach Deiner schönen Anleitung zu machen und bin jetzt wirklich ratlos.

                        Die Verlinkung klappt, allerdings nicht so, wie erwartet.

                        Wenn ich jetzt auf das Thumbnail gehe, blitzt für einen kurzen Augenblick an der richtigen Stelle das Vollbild auf. Dann wird (wie vorher schon gehab)t das Vollbild in einem neuen Fenster angezeigt. Wenn ich dann mit dem Browser-Button zurückgehe, ist das Vollbild an der richtigen Stelle zu sehen.

                        Ich zeige jetzt mal das entsprechende HTML-Dokument. Ich glaube, am Stylesheet liegt es nicht, dort habe ich nur die Position des Vollbildes definiert.

                        Das Javascript steht im head und der die Bilder betreffende Bereich ganz unten.

                        Was mache ich falsch?

                        Viele Grüße
                        pet

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
                        <head>
                        <title>Petra Hämmerleinova</title>
                        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
                        <meta name="Title" content="Petra Hämmerleinova-design und illustration" />
                        <meta name="Author" content="Petra Hämmerleinova" />
                        <meta name="Subject" content="Webseite von Petra Hämmerleinova  design and illustration" />
                        <meta name="Description" content="Webseite von Petra Hämmerleinova - fashion illustration, stationary design, product graphics, illustration" />
                        <meta name="Keywords" content="fashion,beauty,stationary,graphics,product design,illustration,greeting cards" />
                        <meta name="Language" content="DE" />
                        <meta name="Copyright" content="© Petra Hämmerleinova" />
                        <meta name="Designer" content="Petra Hämmerleinova" />
                        <meta name="Publisher" content="Petra Hämmerleinova" />
                        <meta name="Distribution" content="Global" />

                        <link href="stylestationary.css" rel="stylesheet" media="screen">

                        <script type="text/javascript">
                                function anzeigenVollbild(url) {
                                document.getElementById("Vollbild").src = url;
                                return false;
                               }

                        </script>

                        </head>

                        <body id="startseite">

                        <div id="wrapper">

                        <div id="kopfbereich">
                                       <h1>&thinsp;PETRA H&Auml;MMERLEINOVA</h1>

                        </div> <!-- Ende kopfbereich -->

                        <div id="untertitel">
                                       <h2>&thinsp;illustration &amp; design</h2>

                        </div> <!-- Ende untertitel -->

                        <img src="logo.jpg" alt="logo" id="logo" width="33" height="33">

                        <div id="navibereich">
                                     <ul>
                                        <li><a href="index.html">&thinsp;home</a></li>
                                        <li id="slogan">&thinsp;portfolio</li>
                                        <li><a href="bio.html">&thinsp;bio</a></li>
                                        <li><a href="contact.html">&thinsp;contact</a></li>
                                     </ul>

                        </div> <!-- Ende navibereich -->

                        <div id="unternavi">
                                    <ul>
                                      <li><a href="fashion.html">&thinsp;fashion&frasl; beauty</a></li>
                                      <li id="slogan">&thinsp;stationary</a></li>
                                      <li><a href="product.html">&thinsp;product graphics</a></li>
                                      <li><a href="illustration.html">&thinsp;illustration</a></li>
                                    </ul>

                        </div> <!-- Ende unternavi -->

                        <div id="fussbereich">
                                    <p>&copy;2012 Petra Hämmerleinova all rights reserved </p>

                        </div> <!-- Ende fussbereich -->

                        <div id="bildunterschrift"

                        align="center"

                        <p>Jumping Jack &quot;Princess Lilli&quot;<br />
                                Rannenberg &amp; friends</p>

                        </div> <!-- Ende bildunterschrift -->

                        <img id="Vollbild" src="" alt="Vollbildanzeige">

                        <div id="bildbereich">

                        <a href="image_prinzessin.jpg"   onclick="anzeigenVollbild(this.href)"><img src="thumbnail_prinzessin.jpg" id="thumbnailprinzessin" alt="Thumbnail Princess" width="60" height="60"></a>

                        </div>   <!-- Ende bildbereich -->

                        </div> <!-- Ende wrapper -->

                        </body>

                        </html>

                        1. Hallo,

                          da bin ich schon wieder. Ich habe versucht, alles nach Deiner schönen Anleitung zu machen und bin jetzt wirklich ratlos.
                          Die Verlinkung klappt, allerdings nicht so, wie erwartet.

                          daran ist ein Fehler von mir schuld :-(

                          Was mache ich falsch?

                          a) den Fehler, den ich begangen habe, zu übernehmen
                          b) wenn Du wirklich XHTML schreiben und es entsprechend ausliefern willst,
                              - dann darfst Du keine Fehler im Markup machen
                                  z.B. nicht geschlossenes div-Tag (nicht Element!)
                                       schließendes </a> ohne öffnendes <a> bei "slogan"
                              - musst Du alle leeren Elemente wie img-Elemente <http://de.selfhtml.org/html/xhtml/unterschiede.htm#leere_elemente@title=XHTML-konform schließen>
                                (wie Deine Meta-Angaben)
                              - den Inhalt der script-Elemente <http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style@title=als CDATA-Bereich> auszeichnen.

                          » <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
                          
                          > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">  
                            
                          [...]  
                            
                          
                          >      <div id="unternavi">  
                          >             <ul>  
                          >               <li><a href="fashion.html">&thinsp;fashion&frasl; beauty</a></li>  
                            
                          <!-- da fehlt das öffnende <a> -->  
                          
                          >               <li id="slogan">&thinsp;stationary</a></li>  
                          >               <li><a href="product.html">&thinsp;product graphics</a></li>  
                          >               <li><a href="illustration.html">&thinsp;illustration</a></li>  
                          >             </ul>  
                            
                          [...]  
                            
                          <!-- da das schliessende > -->  
                          
                          >      <div id="bildunterschrift"  
                          >   
                          >         align="center"  
                            
                          und Du willst ganz bestimmt kein align-Attribut mehr verwenden - als Perfektionistin :-)  
                            
                          <!-- da fehlt der schließende Slash alt="Vollbildanzeige" /> -->  
                          
                          >         <img id="Vollbild" src="" alt="Vollbildanzeige">  
                            
                          [...]  
                            
                            
                          <!-- und da mein Fehler: Es muss lauten  
                            
                                   onclick="return anzeigenVollbild(this.href);">  
                            
                               damit die Standardaktion (Link folgen) unterdrückt wird.  
                          -->  
                            
                          
                          >         <a href="image_prinzessin.jpg"   onclick="anzeigenVollbild(this.href)"><img src="thumbnail_prinzessin.jpg" id="thumbnailprinzessin" alt="Thumbnail Princess" width="60" height="60"></a>
                          
                          

                          Als Perfektionistin willst Du natürlich nachher nicht allen Bildern Deiner Galerie einzeln die onclick-Handlerfunktion zuweisen. Wie Du das schöner und besser machen kannst, erklärt molily im Artikel "Grundlagen zur Ereignisverarbeitung".

                          Statt XHTML 1.1 zu schreiben, rate ich Dir übrigens zu HTML5, gerne auch in XHTML-kompatibler Schreibweise.

                          Freundliche Grüße

                          Vinzenz

                          1. Hallo,

                            vielen Dank für die Korrekturen. Jetzt ist das Vollbild auch geanauso da, wo es sein soll.

                            Warum empfiehlst Du HTML5 statt XHTML 1.1? Weil es mehr Fehler verzeiht?

                            Grundlagen zur Ereignisverarbeitung werde ich mir durchlesen.( Und hoffentlich etwas damit anfangen können.)

                            Kannst Du ein gutes Buch zu javascript empfehlen? Ich war in der Buchhandlung und es gibt eine überwältigende Menge. Ich brauche neben dem Internet auch ein gedrucktes Nachschlagewerk (bin da etwas altmodisch).

                            Viele Grüße
                            pet

      2. Om nah hoo pez nyeetz, pet!

        Unter http://www.2agenten.com/2ag_artists/43/andrea-ventura/1700 sieht man gut, was ich möchte, nur das sie statt Thumbnails eine Liste benutzt haben.

        Da ist für jedes Bild eine eigene Seite erstellt worden.

        Was du suchst, sind Bilder innerhalb von Links: <a href="..."><img src="..." alt="..."></a> oder Hintergrundgrafiken für Linkelemente.

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Hallo Matthias,

          mit <a href="..."><img src="..." alt="..."></a> habe ich es schon versucht, aber dann zeigt der Browser das Vollbild nicht auf der gleichen Seite, sondern auf einer neuen.

          Mit Hintergrundgraphikem habe ich es noch nicht versucht. Wäre das eine saubere, akzeptable Lösung? Ich möchte halt auch nicht irgendetwas zusammenpfuschen. Auch wenn ich ein Anfänger bin, so soll es trotzdem gut gemacht sein.

          Gruß
          pet

          1. Om nah hoo pez nyeetz, pet!

            Wäre das eine saubere, akzeptable Lösung? Ich möchte halt auch nicht irgendetwas zusammenpfuschen. Auch wenn ich ein Anfänger bin, so soll es trotzdem gut gemacht sein.

            Es ist an der Zeit, deine bisherige Arbeit zu zeigen.

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. Om nah hoo pez nyeetz, pet!

              Wäre das eine saubere, akzeptable Lösung? Ich möchte halt auch nicht irgendetwas zusammenpfuschen. Auch wenn ich ein Anfänger bin, so soll es trotzdem gut gemacht sein.

              Es ist an der Zeit, deine bisherige Arbeit zu zeigen.

              Tja, gerne, aber wie? Auf meinem Mac gibt es einen "dicken" Ordner, in dem liegen die verschiedenen HTML und CSS Dateien, plus Images.

              Kann ich es Euch irgendwie zeigen, ohne die Website zu veröffentlichen?
              (Wieviele lachen jetzt?)

              Pet

  2. Hallo,

    Ich möchte auf meiner Homepage eine Galerie (bin Graphikerin) mit Thumbnails rechts und einer Bild-Vollansicht zentriert haben.

    Wie ist es ohne Javascript möglich, die Thumnails mit den Vollbildern zu verlinken, ohne das für das Vollbild ein neues Fenster aufgeht?

    mit Javascript ist das eine Angelegenheit von weniger als 10 Zeilen Code.
    Das wäre doch ein hübscher Einstieg in diese Programmiersprache. Ohne Javascript gäbe es die Möglichkeit eines IFrames, der jedoch die gleichen Nachteile hat wie ein eigenes Browserfenster.

    Du hast doch Javascript als Themenbereich gewählt. Was stört Dich an einer Umsetzung mit Javascript? Diejenigen ohne Javascript bekämen einfach nur das Bild angezeigt und müssen mit der Zurück-Schaltfläche zurück navigieren. Diese Leute wollen das sowieso so haben und sind mangelnden Komfort gewöhnt, das nähme ich in Kauf.

    Die Galerie serverseitig umzusetzen, wie es die von Dir angeführte Seite macht, ist für den Einstieg deutlich aufwendiger. Andererseits könnte es Dich motivieren, Dich mit serverseitiger Programmierung auseinanderzusetzen. Letztlich kannst nur Du wissen, wo Du hinwillst.

    Freundliche Grüße

    Vinzenz

    1. Hallo Gunnar™,

      Ich möchte auf meiner Homepage eine Galerie (bin Graphikerin) mit Thumbnails rechts und einer Bild-Vollansicht zentriert haben.

      ohne Berücksichtigung älterer IEs (älter als IE9) und ohne Javascript gäbe es die Möglichkeit des :target-Selektors.

      Freundliche Grüße

      Vinzenz

    2. Hallo,

      vielen Dank für Euere Ratschläge.
      Gegen Javascript,Lightbox etc. habe ich gar nichts. Nur kenne ich es einfach nicht und kann deshalb leider auch nicht entscheiden, was für mein Projekt das Beste wäre.

      Ich bin wirklich ein blutiger Anfänger und schon sehr stolz, das ich meine Website mit HTML und CSS so geschrieben habe, daß alles so aussieht und funktioniert, wie es soll nur das mit dem Thumbnailsverlinken klappt halt nicht.

      Ich wüßte auch, wie ich das ganze machen muß, wenn ich für jedes Bild eine eigene Seite schreibe, daß finde ich aber dann doch sehr rückständig, wenn es andere Methoden gibt.

      Jetzt weiß ich immer noch nicht weiter. Javascript? PHP? CSS (wäre prima, weil ich das schon etwas beherrsche)?

      Viele Grüße
      ratloses Pet

      1. Hallo,

        Ich bin wirklich ein blutiger Anfänger und schon sehr stolz, das ich meine Website mit HTML und CSS so geschrieben habe, daß alles so aussieht und funktioniert, wie es soll nur das mit dem Thumbnailsverlinken klappt halt nicht.

        Ich wüßte auch, wie ich das ganze machen muß, wenn ich für jedes Bild eine eigene Seite schreibe, daß finde ich aber dann doch sehr rückständig, wenn es andere Methoden gibt.

        das macht dann serverseitig ein Script.

        Jetzt weiß ich immer noch nicht weiter. Javascript? PHP? CSS (wäre prima, weil ich das schon etwas beherrsche)?

        eine reine CSS-Lösung (ohne die von Dir angesprochenen eigenen Seiten) mit :target läßt IE 8 und älter außen vor. Die Verbreitung dieser Versionen ist leider nicht vernachlässigbar. Wäre dies für Dich ok?

        Wenn Du es mit Javascript umsetzt - ist es für Dich ok, dass Benutzer ohne Javascript das Bild nicht dort sehen, wo Du es gerne hättest?

        Nehmen wir folgendes Codefragment an:

        <img id="vollansicht" src="" alt="Vollansicht">

        ...

        <ul>
            <li><a href="/pfad/zur/vollansicht/bild1"><img src="/pfad/zum/thumb/bild1"></a></li>
            <li><a href="/pfad/zur/vollansicht/bild2"><img src="/pfad/zum/thumb/bild2"></a></li>
        </ul>

        Dann musst Du als Anfängerin nichts weiter machen, als folgendes:

        <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=Beim Anklicken> eines Links
            Weise den Inhalt des http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#a@title=href-Attributs <http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=des aktuellen Objekts> dem http://de.selfhtml.org/javascript/objekte/images.htm#src@title=src-Attribut der Vollansicht zu
            Unterdrücke die Ausführung des Links
        Fertig

        Im Prinzip ein Zweizeiler :-) Kann doch nicht so schwierig sein. Willst Du es nicht versuchen?

        Freundliche Grüße

        Vinzenz

        1. Hallo Vinzenz,

          tja, die Kätzchen(CSS) sind es.

          Keine Ahnung, wieviele User noch IE8 oder älter benutzen. Ich schätze, daß Firmen, Agenturen etc. neuere Versionen benutzen oder? Die Privatpersonen könnte ich (wenn auch ungern) vernachlässigen.

          Gibt es denn viele Benutzer ohne Javascript?

          Ich werde es versuchen. Wie unterdrücke ich die Ausführung des Links?

          Und vielen Dank nochmal.

          Grüße
          pet

          1. Hallo,

            Gibt es denn viele Benutzer ohne Javascript?

            glaub' keiner Statistik, die Du nicht selbst gefälscht hast :-)
            Ich gehe von unter 2% menschlicher Benutzer aus, auch wenn andere ganz andere Zahlen ins Spiel bringen

            Ich werde es versuchen.

            Sehr schön.

            Wie unterdrücke ich die Ausführung des Links?

            Die einfache Variante, die für den Einstieg völlig reicht:

            return false;

            Freundliche Grüße

            Vinzenz

          2. Hallo,

            Keine Ahnung, wieviele User noch IE8 oder älter benutzen.

            mindestens mal diejenigen IE-Nutzer, die noch Windows XP haben, da der IE8 für XP das höchste der Gefühle ist.

            Ich schätze, daß Firmen, Agenturen etc. neuere Versionen benutzen oder?

            Für Agenturen, insbesondere Werbung, Marketing, Design usw. möchte ich nicht meine Hand ins Feuer legen. Aber was sonstige Firmen (Industrie) angeht, da sind es eher diese, bei denen man häufig auf alte Browser trifft.

            Die Privatpersonen könnte ich (wenn auch ungern) vernachlässigen.

            Da dürfte der Anteil neuer Betriebssystem- und Browserversionen aber vermutlich höher sein.

            Gibt es denn viele Benutzer ohne Javascript?

            "Viel" ist Definitionssache. Je nach angesprochener Zielgruppe und je nach erhebendem Anbieter variieren die Schätzungen von fast Null bis in die Gegend von 10..15%.

            So long,
             Martin

            --
            Lieber eine gesunde Verdorbenheit als eine verdorbene Gesundheit.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(