Ankündigung

Einklappen
Keine Ankündigung bisher.

Neues Bild mit Hover anzeigen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Neues Bild mit Hover anzeigen

    Hallo

    Ich möchte auf ein Thumbnail fahren und dann ein grosses Bild an einem andern Ort anzeigen. Unter IE funktioniert das, mit den andern Broser wird das grosse Bild aber nicht genau an der gewünschten Position angezeigt. Ich möchte bei Position schon lieber "absolute" statt fixed nehmen, dann wird das Bild aber immer im Abstand zum ausgewählten Thumbnail (Eltern?) positioniert.

    Kann mir jemand helfen? Vielen Dank!

    PHP-Code:
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 0px;
    }
    .thumbnail:hover span
      { /*CSS for enlarged image on hover*/
      position: fixed;
      visibility: visible;
      left: 402px; top: 162px; /*position where enlarged image should offset horizontally */
      }
    .bildmitte
      {
      position: absolute;
      left: 402px; top: 162px; /*position grosses Bild */
      }


    <a class="thumbnail" href="#thumb"><img src="../<?php echo $objekt ?>/k2.png" /><span><img src="../<?php echo $objekt ?>/g2.png" /><br /></span></a>
    <a class="thumbnail" href="#thumb"><img src="../<?php echo $objekt ?>/k3.png" /><span><img src="../<?php echo $objekt ?>/g3.png" /><br /></span></a>
    <a class="thumbnail" href="#thumb"><img src="../<?php echo $objekt ?>/k4.png" /><span><img src="../<?php echo $objekt ?>/g4.png" /><br /></span></a>
    <a class="thumbnail" href="#thumb"><img src="../<?php echo $objekt ?>/k5.png" /><span><img src="../<?php echo $objekt ?>/g5.png"  /><br /></span></a>
    <img src="../<?php echo $objekt ?>/g1.png" class="bildmitte" />


  • #2
    Hast Du es mal mit z-index probiert?
    Einfach das Großbild in einen Container legen, dann kannst Du glaube ich besser positionieren usw.
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Danke für die schnelle Anwort!

      Das Muster welches ich übernommen habe hatte schon ....

      PHP-Code:
      .thumbnail{
      positionrelative;
      z-index0;
      margin0px;
      }

      .
      thumbnail:hover{
      background-colortransparent;
      z-index50;

      Aber z-index kenne ich nicht ... habe gelesen das es sich um Ebenen handle. Ich habe meinem .bildmitte auch mal z-index: 100; zugeteilt - ohne gewünschtes Resultat.

      Kommentar


      • #4
        Mit einer Konstellation, ähnlich dieser sollte es machbar sein
        Code:
        <div class="hover-preview">
            <img src="../<?php echo $objekt ?>/g1.png" alt="" />
        </div>
        Code:
        .hover-preview {
            position:absoulte;
            top:0px; left:0px;
            z-index:100;
        }
        Die Werte für top und left musst Du dann halt anpassen, aber generell sollte Dein Vorhaben auf die Weise lösbar sein.
        Competence-Center -> Enjoy the Informatrix
        PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

        Kommentar


        • #5
          Leider bin ich auch mit dieser Variante nicht weitergekommen ... so wird das "grosse" Bild gar nicht mehr angezeigt. Das <div> unterbindet wahrscheinlich die Verbindung.

          Das Problem ist: "position: fixed;" geht nicht (Bild ja immer am gleichen Ort) und absolute wird immer im Verhältnis zum kleinen Bild (Eltern) angezeigt.

          Ich müsste die Vererbung zum kleinen Bild auflösen, eine separate class=XX zeigt einfach keine Wirkung
          PHP-Code:
          <a class="thumbnail" href="#thumb"><img src="../<?php echo $objekt ?>/k2.png" /><span class="XX"><img src="../<?php
          @Arne könntest Du mir vielleicht ein Muster mit "meinen" Felder angeben?

          Kommentar


          • #6
            Ich glaube, ich hab Deine Anforderung gar nicht richtig gelesen.

            Du hast zwei Elemente, eins für das Thumbnail und eins für die Großansicht, wenn ich das jetzt richtig verstanden habe?!
            Dann wirst Du aber mit CSS nicht weit kommen. Das solltest Du mit JavaScript bzw. einem Framework wie bspw. jQuery machen.
            Competence-Center -> Enjoy the Informatrix
            PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

            Kommentar


            • #7
              hoffentlich ... es gibt Hoffnung

              Also was ich möchte:
              einige kleine Bilder in einer Reihe angeordnet, ein grosses in der Mitte. Wenn man nun über ein kleines fährt (hover), sollte das ausgewählte gross in der Mitte angezeigt werden.

              Mit der oben (ersten) aufgeführten Variante funktioniert es eigentlich zu 90%, nur habe ich die schon beschrieben Probleme:
              Mit Position "fixded" wird das Mittelbild je nach Zoom oder scroll nicht mehr am richtigen Ort angezeigt - mit "absolute" wird der Abstand immer zu den Eltern (also kleines Bild) genommen.

              Gibt es wirklich keine Lösung? Muss ich wirklich bei Java suchen ...

              Kommentar


              • #8
                Java und JavaScript sind zwei grundverschiede Dinge. Netscape fand es damals cool, sein LiveScript in JavaScript umzubenennen, weil Java zu der Zeit gerade eine hohe Popularität genoss.
                Standards - Best Practices - AwesomePHP - Guideline für WebApps

                Kommentar


                • #9
                  Das ist so ohne weiteres über CSS allein nicht machbar.
                  Du kannst auf das hover-Ereignis reagieren, aber abhängig von der DOM-Struktur nicht jedes beliebige Element verändern.
                  Competence-Center -> Enjoy the Informatrix
                  PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                  Kommentar

                  Lädt...
                  X