LAW-Web: hover

Ich möchte bei überfahren eines Bilde mit der Maus eine Vergrößerung sehen, die entweder beim Verlassen oder spätesten nach ein Klick verschwindet. Ich finde keine Möglichkeit ausser einer separaten Seite mit entsprechenden Klicks. Mein Horizont ist noch sehr begrenzt, kann mir jemand raten? Karl-Heinz

  1. Hej LAW-Web,

    Ich möchte bei überfahren eines Bilde mit der Maus eine Vergrößerung sehen, die entweder beim Verlassen oder spätesten nach ein Klick verschwindet.

    Grundsätzlich ist es erst mal schwierig sich vorzustellen, wo das erwartbar sein könnte. Grundsätzlich sollte man Besucher nicht dadurch überraschen, das Dinge passieren, mit denen niemand rechnen kann.

    In ganz speziellen Fällen könnte das Sinn machen.

    Ich finde keine Möglichkeit ausser einer separaten Seite mit entsprechenden Klicks.

    Du müsstest ein (großes) Bild anzeigen lassen, wenn über das kleine Bild mit der Maus gefahren wird. Die Pseudo-Klasse, die du dafür benötigst, lautet hover.

    Was aber ist mit den Nutzern von Smartphones, Tablets oder Laptops mit Touch-Displays?

    Was mit Tastatur-Nutzern?

    Mein Horizont ist noch sehr begrenzt, kann mir jemand raten?

    Schwer. Ohne den Anwendungsfall genauer zu kennen, fürchte ich, dass du das anders machen solltest. Falls dein Vorhaben doch Sinn macht, sehe ich gleich das nächste Problem: du wirst sehr lange Ladezeiten haben, wenn die ganzen Bilder, die groß angezeigt werden sollen, gleich zu Beginn geladen werden. Und wenn die erst beim überfahren mit der Maus geladen werden, wird es dann eine Verzögerung geben.

    Kannst du denn mal die Seite zeigen, wo du das einbauen willst?

    Marc

    1. Hallo! URL: wentzell.eu Das ist erstmal nur ein Versuch. Ich möchte die Bilder der linken Spalte - die wegen der Breite der Spalte abgeschnitten sind - grösser und vollstänig anzeigen, aber durch eine einfachen Klick - ohne Umweg auf "zurück" des Browsers - wieder auf die normale Ansicht zurückkommen. Das vielleicht etwas zu eigensinnig, denn auch auf meinem Smartfone fuktioniert die Rückkehr einwandfrei mit "zurück". Die Bilder die beim Klick erscheinen sind keine Originale sondern irgwelche Demos, die ich mir gegriffen habe. Die Lösung "Demo" finde ich sehr gut, ich weiss nicht, ob ich sie auf der Seite verwirklichen kann. Karl-Heinz


      edit: ich habe den Link klickbar gemacht (@marctrix)

      1. Hej LAW-Web,

        URL: wentzell.eu Das ist erstmal nur ein Versuch.

        Dann versuch es mal mit einem ganz anderen Weg. Im Moment ist die Seite nicht gut benutzbar.

        Wie wäre es mit einem fertigen Layout von SELFHTML?

        Dann hast du erst mal eine Grundlage und bist schnell wieder auf dem jetzigen Stand, aber die Basis ist zukunftssicherer.

        Marc

  2. Hallo Karl-Heinz,

    wie Marc schon anmerkte, ist das mit Hovern auf Smartphones eher schwierig. Außerdem ist ein Scrollen durch eine solche Seite nicht sehr angenehm, weil sich dauernd etwas verschiebt, weil man ja beim Scrollen auch mal mit der Maus über die Bilder hovert.

    Vielleicht möchtest du eine sogenannte Lightbox haben? Dafür gibt es fertige Lösungen und eine Anleitung im SELFHTML-Wiki, um sie einzubinden.

    Gruß
    Julius

  3. Hallo,

    meinst du so etwas?

    https://www.j-berkemeier.de/Spiralen.html

    Gruß
    Jürgen

  4. meinst du sowas Beispiel Demo

    1. Hallo basti1012,

      meinst du sowas Beispiel Demo

      was macht jquery darin? Wird doch gar nicht genutzt. Und die Bilder sind unproportional( soll aber vielleicht so sein?). Das mit Transition zu lösen, ist allerdings keine schlechte Idee.

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. Ja das Jquery ist da drinne weil das ein Standart schnipsel ist den ich verwende.Sieht man auch am titel da steht noch flex Layout. Aber spielt für das Beispiel ja eigentlich keine rolle weil es geht ja um die Bilder. Die Bilder sind auch extra so gross und gleichmässig damit es gleichmäßiger aussieht . Normalerweiße ist ein Bild größer.

        Ich wollte eigentlich auch nur das transition und scale vorführen,damit der TE ein Beispiel hat wie man es machen könnte. Mir würden glaube ich noch 23 Varianten einfallen wie man das Lösen könnte aber finde diese doch eigentlich ganz simpel und sollte auch von Anfänger zu verstehen sein.