image-01 image-02 image-03
Sie sind hier: Startseite > Sticky Tooltips und R-Quiz 3

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.

NameGrößeÄnderungsdatum
JPG Dateifeuerdrache.jpg11 KB15.11.2020 18:47
TXT Dateisticky+rquiz_html-datei.txt1 KB15.11.2020 22:51
TXT Dateisticky+rquiz_template_head-bereich.txt3 KB15.11.2020 22:57
CSS Dateistickytooltip.css1 KB05.11.2017 13:28
JS Dateistickytooltip.js4 KB02.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.


Welche Wort passt zu dem Bild? Wenn Du Hilfe brauchst, fahre mit der Maus über das Bild.

Schreibe den Begriff ins Feld: Feuerdrache().

 

Ich gebe dir drei Worte zur Wahl. Nur eins ist richtig!
Feuerlöscher, Drachenhöhle, Feuerdrache
Letzte Bearbeitung:
Einige Bereiche dieser Website benötigen zu ihrer Funktion sogenannte SESSION-Cookies, die jedoch keine personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient oder Ihr Gerät beziehen. Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, weitere Cookies auf Ihrem Rechner zu platzieren. Mehr Info

Please activate JavaScript in your browser.

» Sitemap