hover – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self hover Tue, 26 Jun 18 16:42:55 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725624#m1725624 https://forum.selfhtml.org/self/2018/jun/26/hover/1725624#m1725624 <p>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</p> hover Tue, 26 Jun 18 17:17:53 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725627#m1725627 https://forum.selfhtml.org/self/2018/jun/26/hover/1725627#m1725627 <p>Hej LAW-Web,</p> <blockquote> <p>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.</p> </blockquote> <p>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.</p> <p>In ganz speziellen Fällen könnte das Sinn machen.</p> <blockquote> <p>Ich finde keine Möglichkeit ausser einer separaten Seite mit entsprechenden Klicks.</p> </blockquote> <p>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 <code>hover</code>.</p> <p>Was aber ist mit den Nutzern von Smartphones, Tablets oder Laptops mit Touch-Displays?</p> <p>Was mit Tastatur-Nutzern?</p> <blockquote> <p>Mein Horizont ist noch sehr begrenzt, kann mir jemand raten?</p> </blockquote> <p>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.</p> <p>Kannst du denn mal die Seite zeigen, wo du das einbauen willst?</p> <p>Marc</p> hover Tue, 26 Jun 18 17:26:57 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725633#m1725633 https://forum.selfhtml.org/self/2018/jun/26/hover/1725633#m1725633 <p>Hallo Karl-Heinz,</p> <p>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.</p> <p>Vielleicht möchtest du eine sogenannte Lightbox haben? Dafür gibt es fertige Lösungen und eine <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Lightbox_einbinden" rel="nofollow noopener noreferrer">Anleitung im SELFHTML-Wiki</a>, um sie einzubinden.</p> <p>Gruß<br> Julius</p> hover Tue, 26 Jun 18 19:37:59 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725645#m1725645 https://forum.selfhtml.org/self/2018/jun/26/hover/1725645#m1725645 <p>Hallo,</p> <p>meinst du so etwas?</p> <p><a href="https://www.j-berkemeier.de/Spiralen.html" rel="nofollow noopener noreferrer">https://www.j-berkemeier.de/Spiralen.html</a></p> <p>Gruß<br> Jürgen</p> hover Tue, 26 Jun 18 21:45:23 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725649#m1725649 https://forum.selfhtml.org/self/2018/jun/26/hover/1725649#m1725649 <p>meinst du sowas <a href="http://sebastian1012.bplaced.net/homepagebasti1012/forumscrite_juni2018_2/bildzoombeihover.php" rel="nofollow noopener noreferrer">Beispiel Demo</a></p> hover Wed, 27 Jun 18 09:02:36 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725669#m1725669 https://forum.selfhtml.org/self/2018/jun/26/hover/1725669#m1725669 <p>Hallo! URL: <a href="http://wentzell.eu" rel="nofollow noopener noreferrer">wentzell.eu</a> 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</p> <hr> <p><strong>edit</strong>: ich habe den Link klickbar gemacht (<a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@marctrix</a>)</p> hover Tue, 26 Jun 18 22:35:09 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725650#m1725650 https://forum.selfhtml.org/self/2018/jun/26/hover/1725650#m1725650 <p>Hallo basti1012,</p> <blockquote> <p>meinst du sowas <a href="http://sebastian1012.bplaced.net/homepagebasti1012/forumscrite_juni2018_2/bildzoombeihover.php" rel="nofollow noopener noreferrer">Beispiel Demo</a></p> </blockquote> <p>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.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> hover Thu, 28 Jun 18 23:39:18 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725776#m1725776 https://forum.selfhtml.org/self/2018/jun/26/hover/1725776#m1725776 <p>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.</p> <p>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.</p> hover Wed, 27 Jun 18 10:22:12 Z https://forum.selfhtml.org/self/2018/jun/26/hover/1725677#m1725677 https://forum.selfhtml.org/self/2018/jun/26/hover/1725677#m1725677 <p>Hej LAW-Web,</p> <blockquote> <p>URL: <a href="http://wentzell.eu" rel="nofollow noopener noreferrer">wentzell.eu</a> Das ist erstmal nur ein Versuch.</p> </blockquote> <p>Dann versuch es mal mit einem ganz anderen Weg. Im Moment ist die Seite nicht gut benutzbar.</p> <p>Wie wäre es mit einem fertigen <a href="https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts" rel="nofollow noopener noreferrer">Layout von SELFHTML</a>?</p> <p>Dann hast du erst mal eine Grundlage und bist schnell wieder auf dem jetzigen Stand, aber die Basis ist zukunftssicherer.</p> <p>Marc</p>