Umlauf: Lupe- Funktion

Hallo,

ich hab in meiner Webseite kleine Bilder (img) eingebaut.
Jetzt wollte ich realisieren, dass, wenn ich über die Bilder drüberfahre, sollten die Bilder in einer größeren Größe dargestellt werden.
Ist das irgendwie möglich bzw. gibt es vielleicht ein Beispiel dazu.
Besten Dank,
lg

  1. Moin Moin!

    Bemühe mal eine Suchmaschine Deiner Wahl und lasse sie nach "lightbox" suchen.

    Alexander

    --
    Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
    1. Moin Moin!

      Bemühe mal eine Suchmaschine Deiner Wahl und lasse sie nach "lightbox" suchen.

      Alexander

      OK, ich hab mir die "lightbox" angesehen. Was ich gerne haben möchte ist, wenn man über das Foto fährt, dass es sich dann automatisch vergrößert, nicht erst durch einen Mausklick -> also so eine Atr mousehover.
      Gibts sowas, hab leider nichts gefunden in diese Richtung.

      1. OK, ich hab mir die "lightbox" angesehen. Was ich gerne haben möchte ist, wenn man über das Foto fährt, dass es sich dann automatisch vergrößert, nicht erst durch einen Mausklick -> also so eine Atr mousehover.
        Gibts sowas, hab leider nichts gefunden in diese Richtung.

        Relativ einfache Nummer, du verwendest einfach die :hover-Pseudoklasse und:
        entweder vergrößerst(sprich: normalisierst) du nun ein vorher verkleinertes img-Element
        oder du vergrößerst ein Block-Element dessen Hintergrundbild du austauscht.

        Tendenziell geht das mit absolut oder fix positionierten Elementen besser.

        --
        sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
        1. Relativ einfache Nummer, du verwendest einfach die :hover-Pseudoklasse und:

          (...)

          ~ oder du vergrößerst ein Block-Element dessen Hintergrundbild du austauscht.

          Hier, etwa so:

          <html>  
          <head>  
          	<title>Lupe</title>  
           <style type="text/css">  
            div.bild {  
             background-image:url(http://t3.gstatic.com/images?q=tbn:TWTvCcS8VzEw4M:http://www.tempolimit-lichtgeschwindigkeit.de/galerie/sl218.jpg);  
             background-repeat:no-repeat;  
             width:150px;  
             height:120px;  
             border-style:solid;  
            }  
            div.bild:hover {  
             background-image:url(http://www.tempolimit-lichtgeschwindigkeit.de/galerie/sl218.jpg);  
             width:750px;  
             height:600px;  
            }  
            
           </style>  
          </head>  
          <body>  
            <div class="bild"></div>  
          </body>  
          </html>  
          
          

          Ich habe jetzt ein recht großes Bild genommen, damit man den Ladezeit-Nachteil auch sieht, aber so in etwa könnte es funktionieren.
          Allerdings kann man es mit CSS2.1 nicht skalieren, also die Box müsste dann (anders als in diesem Beispiel) so groß wie das Bild sein.
          Die Ladezeit-Sache dürfte bei Breitbandanschlüssen aber kaum auffallen.

          --
          sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
      2. Könnte aber sein dass du das dann ziemlich unpraktisch findest. Dann gehen wahrscheinlich einige Bilder auf, ohne dass man das wirklich will. Und wenn ein Bild mal offen ist, muss man es mit Klick wieder schließen, oder indem man vom Bild runter fährt. Das kann ziemlich nervtötend sein, ich hab auch schon so eine Funktion wo gesehen.

      3. @@Umlauf:

        nuqneH

        Was ich gerne haben möchte ist, wenn man über das Foto fährt, dass es sich dann automatisch vergrößert, nicht erst durch einen Mausklick -> also so eine Atr mousehover.

        Das hätte den Nachteil, dass du _alle_ Bilder in der hohen Auflösung zum Client übertragen musst, egal ob der Nutzer auch alle groß sehen möchte oder nicht. Denn für einen Mouseover-Effekt muss das große Bild schon beim Client sein; erst dann zu laden wäre zu spät.

        Je nach Anzahl und Größe der Bilder führt das zu vielen unnütz übertragenden Datenmengen.

        Wenn du alerdings sowieso alle Bilder in groß zum Client schickst, brauchst du keine kleine Version mehr davon, sondern kannst das große im Browser runterskalieren.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. @@Umlauf:

          nuqneH

          Was ich gerne haben möchte ist, wenn man über das Foto fährt, dass es sich dann automatisch vergrößert, nicht erst durch einen Mausklick -> also so eine Atr mousehover.
          Das hätte den Nachteil, dass du _alle_ Bilder in der hohen Auflösung zum Client übertragen musst, egal ob der Nutzer auch alle groß sehen möchte oder nicht. Denn für einen Mouseover-Effekt muss das große Bild schon beim Client sein; erst dann zu laden wäre zu spät.

          Das würde ich nicht sagen, "unten" (je nach Ansichtseinstellung) habe ich angeregt ein neues Hintergrundbild in einem Block-Elemente zu laden.
          Ich bin mir nicht 100%ig sicher aber ich meine die Browser würden erst dann laden, wenn das Hintergrundbild gesetzt wird.

          --
          sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
          1. @@Deus Figendi:

            nuqneH

            Ich bin mir nicht 100%ig sicher aber ich meine die Browser würden erst dann laden, wenn das Hintergrundbild gesetzt wird.

            Eben, und dann entsteht eine Verzögerung, die man bei einem Hover-Effekt nicht haben möchte.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. Ich bin mir nicht 100%ig sicher aber ich meine die Browser würden erst dann laden, wenn das Hintergrundbild gesetzt wird.
              Eben, und dann entsteht eine Verzögerung, die man bei einem Hover-Effekt nicht haben möchte.

              Ja, natürlich... du kannst nicht beides haben, kein Pre-load und dennoch unverzögertes Anzeigen, man muss schon wissen was man will ^^
              Ich denke bei durchschnittlich aufgelösten Bildern kann man mit den 200-2000 Millisekunden Verzögerung leben.

              Ansonsten, wenn man beides will, kann man sich jetzt sowas ausdenken wie zu messen wann der Cursor in die Nähe kommt und dann schonmal laden, aber das Laden verwerfen wenn der Cursor sich entfernt und... also das scheint mir etwas aufwendig. Entweder riesieges Pre-Load oder eben kleine Verzögerungen. Das ist aber unabhängig von der Technik...

              Naja vielleicht geht es doch, erdenken wir uns folgendes:

              <div class="outer">  
               <div class="inner"></div>  
              </div>
              

              Und nun machen wir folgendes, wir geben dem Inneren ein bisschen Abstand und ein Thumbnail als Hintergrundbild und zentrieren es im äußeren div.
              Wenn das outer ge-hovert wird ändern wir das Hintergrundbild im Inneren:

              .outer:hover .inner {  
               background-image:url(./goszes.Bild);  
              }  
              /* Und vergrößern wenn das innere erreicht wird */  
              .inner:hover {  
               width:800px;  
               height:600px;  
              }
              

              Sollte klappen... so hat man die Verzögerung verringert.

              --
              sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
  2. Hi there,

    meinst Du sowas?