Bilder vergrößern per "Mouseover" und "CSS" - Teil 1 Aktualisiert und an alle Neuerungen angepasst - 08.06.22
Oft reicht es, ein Bild nur kurz vergrößert dazustellen, um sich einen besseren Eindruck zu verschaffen. Mit diesem Beitrag ist es möglich durch ein "Mouseover" (Maus zeigt auf das Bild) verschiedene Bilder zu vergrößern.
Ein Vorteil dieser Bildvergrößerung ist die Verwendung einer gleichen Befehlszeile für alle zu betrachtenden Bilder.
Es wird nur ein Bild benötig. Die Auflösung des Bildes sollte daher nicht zu klein gewählt werden!
Die vergrößerten Bilder verdecken das Vorschaubild und sind so lange zu sehen, bis der Mauszeiger den Bildbereich verlassen hat.
Auch läßt sich diese Funktion in der Symbolbar integrieren!
Die Darstellungshöhe des vergrößerten Bildes lässt sich in der CSS über "a.menue:hover span {top: -100px;}" bestimmen!
Bei dieser Lösung ist nur ein Eintrag in "Eigene CSS Code" und "Iconbar und kein Eingriff ins Template notwendig!
Die Bildvergrößerung in Aktion:
Bitte den Mauszeiger von rechts nach links über die Bilder gleiten lassen!
Mit dem Rot gekennzeichneten Eintrag wird die Größe des Bildes in "px" eingestellt. Es wird hier nur ein Bild benötig. Die Auflösung sollte nicht zu klein gewählt werden! Achtung! Es ist darauf zu achten, dass der Forumcode für die Breiteneinstellng der Bilddatei schon vorhanden ist. Wenn nicht, bitte nachinstallieren: Breiteneinstellung für Forumbilder
Achtung! Es ist darauf zu achten, dass der Forumcode für die Breiteneinstellng der Bilddatei schon vorhanden ist. Wenn nicht, bitte nachinstallieren: Breiteneinstellung für Forumbilder Folgende Eintragungen sind in der Code-Umsetzung zu tätigen.
Bilder vergrößern per "Mouseover" - Linksseitig darstellen - Nur über "CSS" - Teil 2 Aktualisiert und an alle Neuerungen angepasst - 08.06.22
Soll das Mouseover-Bild das Originalbild nicht überdecken, kann man es linksseitig darstellen. Man braucht hierzu nur den Wert in "a.menue:hover span " in der CSS angepassen .
Ein Wert von ca. "a.menue:hover span {left: 103%;}" ist empfehlenswert, kann aber beliebig angepasst werden.
Auch hier lässt sich die Darstellungshöhe des vergrößerten Bildes in der CSS über "a.menue:hover span {top: -100px;}" bestimmen!
Das Originalbild wird mit angezeigt!
Bei dieser Lösung ist nur ein Eintrag in "Eigene CSS Code" und "Iconbar" und kein Eingriff ins Template notwendig!
Die Bildvergrößerung in Aktion:
Bitte den Mauszeiger über die Bilder gleiten lassen!
Installations-Änderung
• Folgende Angaben in Eigene CSS Code austauschen.
Das Forum ist mit verschiedenen Templates aufgebaut, die auch immer aktualisiert werden! Verändert man etwas im Template, muss man Änderungen manuell durchführen! Im Forum gibt es ein Bereich der nennt sich "Eigener CSS Code". Hier können alle gewünschten CSS-Änderungen eingetragen werden, ohne dass das automatische Aktualisieren des Template gestört wird!
Außerhalb von "Eigener CSS Code", muss der CSS-Code wie folgt umschlossen werden:
<style>
CSS-Code.....
</style>
Hier kommen weitere interessante Links aus dem Forum:
Wer Interesse an Tooltipps hat und bereits eines der Skripte aus dem Forum installiert hat, kann mit Leichtigkeit Bilder per "Tooltipp" vergrößert darstellen. Der Trick besteht darin, einem kleinen Bild ein Tooltipp mit dem gleichen aber größeren Bild zu verpassen!
Vorrausetzungen: Um Bilder auf diese Weise vergrößert darzustellen, benötigt man die folgenden Installation aus diesem Forum!