Bild bei mouseover über ein Wort in Fließtext anzeigen
#2
#4
Hallo Bernd
Blöde Fragen gibt es (eigtl.) nicht. 
Schritt 1: Neues HTML-Widget erstellen (an der Stelle, wo dein Text inkl dem Wort, bei dem ein Bild angezeigt werden soll).
Schritt 2: Den HTML-Code in das Widget kopieren. (Bildadresse: das Bild, welches bei Mouseover angezeigt werden soll, auf eine versteckte Seite laden, Seite aufrufen, Rechtsklick auf das Bild, Bildadresse kopieren)
Das könnte dann bspw. so aussehen:
<p>... basiert auf einem <a href="#" class="popup">Torus<span><img src="https://deine-bildadresse.jimdo.de"></span></a>, dessen Radien ...</p>
Schritt 3: Das im Beispiel aufgeführte CSS-Script in deinen Webseiten-Head einfügen:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
/*<![CDATA[*/
a.popup {
text-decoration:none;
position:relative;
display:block;
}
a.popup:hover {
border:none;
}
a.popup img {
border:none;
}
a.popup span {
visibility:hidden;
position:absolute;
top:20px;
left:0;
}
a.popup:hover span {
visibility:visible;
}
/*]]>*/
</style>
Fertig! :-)
Gruß,
Andre
#6
Moin Bernd
Der Absatz lag an dem "display-block" innerhalb der "a-popup - Klasse".
Die Formatierung (Schriftfarbe etc.) sollte zudem immer über CSS, nicht über HTML vorgenommen werden. Habe das kurz angepasst (Beispiel hier zu sehen):
CSS:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
/*<![CDATA[*/
a.popup {
text-decoration:none;
position:relative;
color:#00ffff!important;
font-weight:bold;
}
a.popup:hover {
border:none;
}
a.popup img {
border:none;
}
a.popup span {
visibility:hidden;
position:absolute;
left:0;
}
a.popup:hover span {
visibility:visible;
}
/*]]>*/
</style>
HTML:
<p>Das ist ein <a href="#" class="popup">Schlagwort<span><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/scee86bccd27a6ab2/image/id7346cff83f06675/version/1529159709/image.jpg" alt="" /></span></a> zum Überfahren mit der Maus.</p>
Passt?
Gruß,
Andre
...am besten immer mit Testseite und Link dazu! ...ansonsten genial!
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
#8
ja, aber nicht jeder kennt die Overrides und/oder kommt mit ihnen klar :)
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo Andre,
erst einmal herzlichen Dank für Dein ausführliches Beispiel (übrigens: Du hast ja eine wahnsinnige Homepage - ich staune nur, was so alles geht ...).
Das klappt auch so weit prima ...
nur wenn ich alles in meine Seite einbaue, gibt es noch ein Problem: Das Bild, das bei mouseover sich öffnet, wird unten abgeschnitten.
Hier kannst Du es sehen:
https://www.frassek.org/3d-mathe/rotatio...planetensystem/
dort Maus auf das Schlagwort "Inklination" bewegen.
Auf der Unterseite "https://www.frassek.org/test/" habe ich das nochmals eingebaut; dort erscheint das Bild vollständig.
Da das Bild ca. in Höhe des Randes der Textbox abgeschnitten wird, nehme ich an, das das Folgelement (animierte GIF-Bild) der Übeltäter ist.
Wenn ich einen Haufen Leerzeilen an das Ende der Textbox einfüge, erscheint das ganze Bild. Das ist natürlich nicht im Sinne der Darstellung ...
Hast Du noch eine Idee, wie das ganze Bild erscheint?
Viele Grüße
Bernd
#11
Hi Bernd
Danke für die Blumen.
Das lässt sich lösen, indem Du deiner Klasse einen höheren z-index vergibst (siehe letzte Zeile):
2
3
4
5
6
a.popup {
text-decoration:none;
position:relative;
color:#00ffff!important;
font-weight:bold;
z-index:99;
Gruß,
Andre
#13
Hi Bernd
Super, das freut mich! Immer gerne! 
Gruß,
Andre
Ähnliche Themen
| Thema | Antworten | Aufrufe | Letzte Aktivität | ||
|---|---|---|---|---|---|
 |
CSS Bild HoverCSS Bild Hover |
1
az_
27.01.2021 |
932 |
|
|
|
Bildtitel bei Slider innerhalb einer Spalte nicht anzeigenBildtitel bei Slider innerhalb einer Spalte nicht anzeigen |
0
DocBernie
13.08.2018 |
1492 |
|
|
|
Mouseover per CSSMouseover per CSS |
2
Comanila
02.08.2018 |
1504 |
|
|
|
Bildtitel in Galerievorschau anzeigenBildtitel in Galerievorschau anzeigen |
2
DocBernie
24.07.2018 |
1711 |
|
|
|
Bild über gesamte BildschirmgrößeBild über gesamte Bildschirmgröße |
3
az_
14.06.2018 |
1562 |
|
|
|
Mouseover Bildzoom funktioniert nichtMouseover Bildzoom funktioniert nicht |
10
DateYourWeight
29.12.2017 |
1280 |
|
|
|
Mouseover klappt nichtMouseover klappt nicht |
8
az_
16.05.2017 |
1904 |
|
|
|
Jimdo Content Bereich erst per Klick anzeigenJimdo Content Bereich erst per Klick anzeigen |
12
erikdwi
27.03.2016 |
3512 |
|
|
|
Mehrsprachigkeit einer Webseite: Flaggensymbol-Bilder in Header einbauenMehrsprachigkeit einer Webseite: Flaggensymbol-Bilder in Header einbauen |
1
az_
13.01.2016 |
1363 |
|
Jetzt anmelden!
Jetzt registrieren!
