Tooltipp - Bild mit mouseover
Manchmal möchte man einen Link mit einem BIld verbinden, z.B. wenn Namen aufgezählt werden soll beim mouseover ein kleines Bild eingeblendet werden, so wie hier:
Man kann das ganze auch so gestalten, dass der Text durch das Bild hindurchscheint, so wie hier
Link mit Bild als Tooltipp (durchsichtig)
Das Bild kann auch durchsichtig angezeigt werden. Dann kann man den Text darunter noch lesen.
Erklärung
Zunächst wird ein Tooltip-Element definiert. Mit display:none wird festgelegt, dass dieses Element normalerweise nicht sichtbar sein soll. Für tooltip_opac img, also das Bild mit Durchsichteffekt wird außerdem festgelegt, in welchem Maß der Hintergrund durchscheinen soll.
Mit einem kleinen JavaScript-Abschnitt wird außerdem festgelegt, dass das Bild erscheinen und wieder verschwinden soll.
Diese beiden Abschnitte kann man entweder im HTML-Modus in die einzelne Textseite einfügen oder wenn man den Tooltipp mit Bild auf mehreren Textseiten nutzen will unter Einstellungen >> Sitewide >> oben
Jetzt kommt die Festlegung der anzuzeigenden Bilder:
Der Klassenname ist entsprechend den vergebenen Definitionen zu vergeben. Natürlich können auch alle Bilder die Klasse tooltip oder tooltip_opac haben. Die vergebene ID (id="1") muss aber eindeutig sein.
Abschließen werden die Stellen festgelegt, an denen die Bilder angezeigt werden sollen:
Link mit Bild als Tooltipp
Link mit Bild als Tooltipp (durchsichtig)
Hier muss wieder auf die richtige ID in showBild('1') bzw. showBild('2') geachtet werden.
Partnerwebsites
Websites mit Mobirise
- Startseite der Mobirise Extension Demo Website auf github.bpgs.de
- Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
- Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
- Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
- EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
- MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
- Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de
Neuigkeiten
Kategorie: alle Artikel (2) | Diese Website (5) | NPage (2) | Webdesign (2)
News und Blogs (14.10.2013 11:51:00) |
Der Beitrag zur Erstellung von News und Blogs bei Npage und anderen Anbietern von Websitebaukästen wurde überarbeitet und erweitert. (mehr lesen...) |
0 Kommentar(e), Kommentar verfassen |
Grunddesign anpassen (14.04.2013 21:02:00) |
So wie auf dieser Website die NPage Designvorlage Plus 135 Grundlage für individuelle Anpassungen ist habe ich auf meiner Reiseberichtswebsite (mehr lesen...) |
0 Kommentar(e), Kommentar verfassen |