Sticky Tooltip und R-Quiz 3
Auf dynamicdrive gibt ein JavaScript (aus dem Jahr 2009), das Sticky Tooltip heißt. Damit es mit CMSimple_XH (auch mit der Version 1.7.4) funktioniert, müssen einige Änderunen im Template vorgenommen werden.
Damit RQuiz mit CMSimple_XH 1.7.x und inzwischen auch PHP 7.3.8x funktioniert, muss die rquiz-3.0.zip-Datei entpackt und der Ordner rquiz in das Rootverzeichnis Ihrer CMSimple_XH 1.7.x-Installation hineinkopiert bzw. auf den Server hochgeladen werden.
Damit Sticky-Tooltip mit CMSimple_XH 1.7.x und inzwischen auch PHP 7.3.8x funktioniert, müssen die Dateien stickytooltip.css und stickytooltip.js in das Rootverzeichnis Ihrer CMSimple_XH 1.7.x-Installation hineinkopiert bzw. auf den Server hochgeladen werden.
Dann erstelle auf der Grundlage Ihres Standard-Templates ein neues Template mit einem eindeutig zuordnenden Namen (z.B. xyz-stickytooltip). In die Template-Datei kopiere in den <head>-Bereich diesen Aufruf (sinnvollerweise dorthin, wo die anderen <link rel= .... stehen):
<link rel="stylesheet" type="text/css" href="style.css">
Weiter unten vor dem abschließenden </head>: kopiere diese beiden Sriptaufrufe hinein:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stickytooltip.js">
Anschließend lade diesen kompletten Template-Ordner in das template-Verzeichnis hoch.
Auf der Seite, wo das Script zum Einsatz kommen soll, wird es über den Reiter „Seite” und dort wird es bei „Seitentemplate” ausgewählt.
Damit nun nicht alles abgetippt werden muss, stelle ich diese Zeilen in txt-Dateien zum Download zur Verfügung. Bei der „template_head-bereich.txt”-Datei sind die entsprechenden Zeilen zur Verdeutlichung eingerückt.
| Name | Größe | Änderungsdatum |
 feuerdrache.jpg | 11 KB | 15.11.2020 18:47 |
 sticky+rquiz_html-datei.txt | 1 KB | 15.11.2020 22:51 |
| sticky+rquiz_template_head-bereich.txt | 3 KB | 15.11.2020 22:57 |
 stickytooltip.css | 1 KB | 05.11.2017 13:28 |
 stickytooltip.js | 4 KB | 02.08.2017 06:53 |
Auf der eigentlichen Seite wird nun der benötigte Code über das Quelltext-Fenster eingefügt. Bitte daran denken, dass es in <div> ... </div> eingefügt werden muss. Beim Text wird dadurch ein Hypertext erzeugt.
Ganz wichtig! — Diese Zeile <!--HTML for the tooltips--> muss zwischen dem Bereich des zu zeigenden Bereichs und dem Bereich stehen, der die Infos in den Tooltips beinhaltet. Fehlt diese Zeile (ohne das <strong> </strong>), ist dieser Text unten auf der Seite sichtbar.
Schaue den „template_head-bereich.txt” an und probiere es auf der Seite aus. Das ist genau dies, was unten auf dieser Seite als Beispiel zu sehen ist. Weitere gibt es natürlich auf der Demo-Seite des Scriptes, allerdings in englisch (dynamicdrive).
Was ich noch nicht löste: Die Verbindung von Imagemaps und Sticky-Tooltipps.
Welches Wort passt zu dem Bild? Wenn Du Hilfe brauchst, fahre mit der Maus über das Bild.
Feuerlöscher, Drachenhöhle, Feuerdrache