1-image 2-image 3-image
Sie sind hier: Startseite > Sticky Tooltips

Sticky Tooltip

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. Achtung: Es funktioniert in dieser Version nicht mit allen Browsern auf Smartphones und Tablets. Mit Firefox funktioniert es.

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_html-datei.txt1 KB15.11.2020 21:25
TXT Dateisticky_template_head-bereich.txt3 KB15.11.2020 21:41
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.


Einige Testbeispiele ...

Thailand
British Columbia

 

Beispiel-Ende

Thailand - Test von Sticky Tooltips.
Test für Sticky Tooltip:
Sticky Tooltip British Columbia
Ich gebe dir drei Worte zur Wahl. Nur eins ist richtig!
Feuerlöscher, Drachenhöhle, Feuerdrache
 
Letzte Bearbeitung:

Aufgrund der neuen Cookies-Verordnung der EU: Einige Bereiche dieser Website benötigen zu ihrer Funktion neben den sogenannten SESSION-Cookies, auch Cookies, die personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient und / oder Ihr Gerät (PC oder Mobil-Gerät) beziehen (also: personenbezogenen Daten). Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, evtl. weitere Cookies auf Ihrem Rechner zu platzieren. Erfahren Sie mehr über diese Cookies im Unterpunkt des Impressums bei Cookies.

Please activate JavaScript in your browser.

» Sitemap