Stand: 23.08.2019

Karl-Heinz Osmer   Konzepte   Helpsystem

du bist hier:   osmer.de  »  konzepte  »  helpsystem.php


Helpsystem mit Javascript (JS)

Das Helpsystem zeigt Texte, die Bestandteile des HTML-Dokuments sind, aber auch Texte, die per Ajax aus der Server-Datenbank geholt werden.


An beliebigen Stellen im HTML-Dokument können Infopunkte positioniert werden, z.B. hier:   Nach dem Laden des Dokuments schließt JS alle Objekte mit class=help an das Helpsystem an. Näheres in der Datei ajax_getHelptext.js unter DOMContentLoaded.

Da ohnehin Javascript erforderlich ist, ergänzt JS die immer gleiche src- und alt- Angabe der Grafik, wenn sie fehlt.
<img id=erster class=help />


Hilfetexte im HTML-Dokument

Diese Dateien sind erforderlich:

Jedes class=help Object kann die data-art="internerHelptext" enthalten. Dann wird die Information nicht vom Server, sondern aus der Angabe data-helptext="..." geholt

<img id=erster class="help"
data-art="internerHelptext" data-helptext="<p>Dies ist ein einfacher Text, der als Info angezeigt wird</p>" />

Die Information darf HTML-Tags enthalten, hier ist sogar eine Hörprobe eingebunden: (i)

<img id="zweiter" class="help" src="img/cartoon_insel.png" alt="(i)" data-art="internerHelptext"
data-helptext="
<p class=re><img class=ic src='img/icon_close.gif' alt=close /></p>
<p>id=zweiter</p>
<p><img src='img/cartoon_insel.png' /></p>
<p>Ich träume lange, schon viel zu lange von einer Insel im blauen Meer ...</p>
<p><audio controls preload='none'>
  <source src='http://osmer.de/musik/mp3/komm_auf_das_schiff_meiner_traeume_SC_freudenburg.mp3' type='audio/mpeg'>
  <source src='http://osmer.de/musik/ogg/komm_auf_das_schiff_meiner_traeume_SC_freudenburg.ogg' type='audio/ogg'>
</audio>
<p>Es können alle HTML-Tags verwendet werden: Bilder, Audio, Video</p>" />


Hilfetexte vom eigenen Server

Keine Live-Beispiele, weil diese Domain osmer.de keine Datenbank hat.

Diese Dateien sind erforderlich:

In Projekten mit mehreren Programmen gelten bei der Eingabe von Daten gleiche Regeln an mehreren Stellen. Bei Änderung / Ergänzung macht es Sinn, diese Regeln zentral zu ändern und allen Stellen zugänglich zu machen.

Durch die freie Gestaltung der Schaltflächen können neue Angaben für eine gewisse Zeit per Grafik oder Text hervorgehoben werden: NEU am 23.8.19