Liebe Expert(inn)en,
bin Mathematiklehrer und absoluter Laie auf dem Gebiet Webseitenprogrammierung und arbeite schon seit längerem am Aufbau einer Webseite mit mathematischen Themen: https://www.frassek.org/
Einige Anpassungen habe ich durch intensive Suche im Web hingekriegt; was ich trotz vieler Versuche und Tipps im Web nicht schaffe, ist folgendes:

In einem Fließtext in einer Textbox soll beim Überfahren eines bestimmten markierten Wortes mit der Maus (z.B. ... basiert auf einem Torus, dessen Radien ...) ein Bild eingeblendet werden, das zusätzliche Erläuterungen (hier: zum Begriff Torus) zeigt (ähnlich wie bei wikipedia).
Das Bild (z.B. "Hinweis_Torus.png") würde ich auf eine versteckte Seite "Hinweise" hochladen.

Könnte mir da jemand weiterhelfen?

Herzlichen Dank und viele Grüße
Bernd Frassek

Hallo Bernd

Da gibt es mehrere Möglichkeiten. Der einfachste Weg um dein Vorhaben zu realisieren, ist wohl den Text in ein HTML-Widget zu schreiben. Hinter deinem Wort bindest Du dann ein Bild ein, dass Du über CSS ausblendest bzw. nur bei Mouseover anzeigen lässt. Ist meiner Meinung nach hier ganz gut beschrieben, jedoch auch nicht gerade so einfach, wenn man ein "absoluter Laie auf dem Gebiet" ist.

Hoffe das hilft Dir etwas.

Gruß,
Andre

Hallo Andre,
danke zunächst ... stimmt ... ist nicht so einfach.

Um Deinen Tipp mit meinem Beispiel anzuwenden:
- In einer beliebigen Textbox kommt das Wort "Torus" vor.
- Den CSS-Part packe ich in den Header.
- Im Widget <a href="#" class="popup">mustertext<span><img src=""></span></a> müsste "mustertext" müsste dann "Torus" lauten.

Wo packe ich das Widget denn hin?
Wie komme ich an die Bildadresse src="" ?

Sorry, falls das sehr blöde Fragen sind ...
LG Bernd

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:

<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

Lieber Andre,
erst einmal herzlichen Dank für die ausführliche Anleitung! :-)
Ich habe das so gemacht, wie Du beschrieben hast für folgenden Text: Das ist ein Schlagwort zum Überfahren mit der Maus.
mit dem HTML-Code:
<p>Das ist ein <a href="#" class="popup"><strong>Schlagwort</strong><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>

Das mouseover funktioniert (s. unten bei https://www.frassek.org/3d-mathe/ ). Jedoch bricht der Text vor "Schlagwort" und dahinter in eine neue Zeile um; dies kriege ich nicht weg.
Außerdem möchte ich das Schlagwort in cyan einfärben. Wenn ich das mit dem Editor versuche oder den Code direkt einfüge:
<p>Das ist ein <a href="#" class="popup"><span style="color: #00ffff;"><strong>Schlagwort</strong><span><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/scee86bccd27a6ab2/image/id7346cff83f06675/version/1529159709/image.jpg" alt="" /></span></span></a> zum Überfahren mit der Maus.</p>
ist das "Schlagwort" verschwunden ...

Vielleicht sollte ich noch erwähnen, dass ich im Header damals einen Eintrag (im Web gefunden) eingetragen habe, der die Unterstreichung bei internen/externen Links wegnimmt (Unterstreichungen finde ich nicht so schön) - vielleicht kollidiert da etwas ...

Könntest Du mir absolutem HTML-Laien da nochmals weiterhelfen - ich hoffe, die Lösung ist nicht sehr aufwendig für Dich ...
Ich könnte Dir auch den ganzen Header schicken, falls das zur Fehlersuche nötig ist ...

Viele Grüße
Bernd

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:

<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

Sind doch Links und Testseiten in den Beiträgen. ;-)

Gruß,
Andre

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

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):

a.popup {
  text-decoration:none;
  position:relative;
  color:#00ffff!important;
  font-weight:bold;
  z-index:99;
 

Gruß,
Andre

Hi Andre,

vielen Dank - jetzt klappt's!!
Habe mal gegoogelt, was z-index bedeutet. Ist völlig einsehbar, nur kommt man da ohne tiefere Kenntnisse von CSS-Programmierung nicht drauf.

Hatte auch bemerkt, dass mein erster Beitrag in der falschen Kategorie (SEO) gelandet ist, aber da war es schon zu spät und bereits eine Antwort da.
Vielleicht kann es der Admin des Formus richten und alles an die richtige Stelle schieben (?), denn Deine Tipps sind auch für andere (Newbies) wertvoll ...

Für heute nochmals herzlichen Dank!

Bernd Frassek

Hi Bernd

Super, das freut mich! Immer gerne!

Gruß,
Andre