Rund um JavaScript

Event-Handler

Ereignisbehandler stellen ein Bindeglied zischen HTML und JavaSript dar. Als Verweisattribute, in Formularen in input-Elementen oder in Klick-Buttons haben diese lange Eingang gefunden. Alle Elemente sollen allerdings nicht geeignet sein. Na, schaun mer mal!
Ich werde mich nur mit onclick, onmouseover, onmouseout, onmousedown und onmouseup beschäftigen.

Klickt diesen Textabsatz an für das 1. Beispiel!

Aber irgendwie ist das schon blöde, darauf hinzuweisen, dass man da irgendwo hinklicken soll. Das muss besser gehen. Indem im 2. Beispiel ein Satzteil oder Begriff optisch anders hervorgehoben wird, wie Legende oder so. Und das mach mer erstmal mit CSS einschließlich :hover für die Wortgruppe.

CSS-Definitionen:

JavaScript Funktion:

Zwei Absätze und die Elementverarbeitung für JavaScript:

Jetzt folgt nur noch: onmousedown und onmouseup. Irgendwie werde ich den Gedanken nicht los, dass das alles auch mit CSS geht (solange die Änderungen Bezug auf das eigenen Element nehmen), aber auf der Seite sollen einige Event-Handler betrachtet werden. Und dazu kommen nun diese zur Anwendung.

Elemente und JavaScript:

Hinweise: </p> in Zeile 81 endet das p-Tag, das auch <figure> und <figcaption> einschließt. Den Textabschnitt auf dem Bild wollte ich nicht noch einmal abbilden.

Ich habe im Zitierten nichts geändert, also sind auch die Anker nicht angepasst. Ich habe alles so stehen lassen. Ein Unterschied besteht allerdings: (Asterix) und (Ausrufezeichen) machen sich bereits hier bemerkbar, dazu später.
Leider ist Herr Zorn bereits verstorben. Rückfragen also nur über den HERRN! Na gut, ich bin Atheist, also selbst herausfinden, wie man das an eigene Bedürfnisse anpasst. Der Code ist gut aufgeräumt und kommentiert, so dass ich fast alles verstehe. Es erscheint einem nur riesig, weil die Menge an Auswahlmöglichkeiten dies erfordert. Somit werde ich hierfür keinen Quellcode abbilden. Das ist alles nachzulesen, weil die Familie seine Arbeit weiterhin im Netz stehen läßt. Danke!

Ich nehme mir somit vor, für Beschreibungen, die sich auf bereits vorhandene Erklärungen bei mir beziehen, eine solche Informationsbox nachzubauen. Ohne bis in die letzte Ecke alles verstanden zu haben, versuche ich mein Glück. Ideen sind genügend vorgelegt!

Aus der Auswahl nehme ich mir eine Variante vor. Die Sprechblase ist ganz lustig, wird aber aus mehreren kleinen gif-Bildern zusammengesetzt, um die Höhe an den Inhalt anpassen zu können. Ich möchte das Aussehen mit CSS umsetzen. Die Steuerung natürlich über die Event-Handler onmouseover und onmouseout. Zu erst aber die CSS-Eigenschaften der InformationsElemente.

CSS-Definitionen 'seiten.css' (BoxGestaltungen):

Das ist erledigt, nun muss der JavaScript-Code erzeugt werden. Das wird wesentlich weniger Schreibarbeit als die zuvor beschriebene, ich arbeite nur an einer Variante! Klar, Herr Zorn hatte ja gleich eine ganze Bibliothek erstellt. Dennoch können mit dem Aufruf des Event-Handlers onmouseover geänderte Eigenschaften nachgereicht werden. Solche Möglichkeiten will ich übernehmen.
Aber erst einmal eine Kontrolle. Ein Hinweis, der nicht über den rechten Rand hinausgehen soll, wird hier weit rechts platziert.
Nun zu (Asterix) * und (Ausrufezeichen !), die sollen bei mir wie eine Art Legende kundtun, was sich da verbirgt. Mit Asterix soll lediglich ein Hinweis gekennezeichnet sein und mit dem Ausrufezeichen ein Hinweis und eine Referenz, über die auf andere Inhalte verwiesen wird. Dazu muss bei <code>onmouseout</code>, um einen Verweis aktivieren zu können, die Box stehen bleiben. Hierfür müssen nun die Bedingungen formuliert werden. Bisher wurden nicht alle Argumente mit Inhalten an die Funktion übergeben.

Beispiel INFOKASTEN 1:

<a href="javascript:void(0);" 
 onmouseover="INFOBOX('INFOKASTEN 1', 
 'oberhalb des Mauszeigers positioniert und zentriert über der Maus, 
 wenn die Ränder nicht überschritten werden.', 1, '', '', '')"  
 onmouseout="BOXOUT(0, '')">Aber erst einmal eine Kontrolle</a>
		

Beispiel INFOKASTEN 2:

<a href="javascript:void(0);"
 onmouseover="INFOBOX('INFOKASTEN 2', 
 'oberhalb des Mauszeigers positioniert und zentriert, so die Ränder nicht überschritten werden.  
 Die Box wird durch die X-BOX geschlossen.', 2, '', '', 'ja')" 
 onmouseout="BOXOUT(2, 'ja')">hier weit rechts</a>
		

Ganz kurze Erklärung hierzu: Kommen auf einer Seite mehrere InfoBoxen zur Anwendung, müssen die IDs unterschieden werden. Jede InfoBox ohne Schließfenster erhält für das Event onmouseout die ID=0 und folgend ein leeres Argument. Mit Schließfenster wird die gleiche ID wie für onmouseover vergeben und das zweite Argument - „ja“, irgendwas.

Das reicht nicht mehr für weitere Anpassungen. Eine generelle Änderung an der Infobox sollte allerdings in den CSS-Eigenschaften vorgenommen werden respektive Farbanpassungen zum eigenen Layout.
Ich erachte es zwar nicht als sehr sinnvoll mit „Beckers Bunter Bühne“ für jeden Hinweis mit unterschiedlichen Einfärbungen daherzukommen, aber manches kann ja wichtiger sein als alles Übrige.
Argumente an die Funktion INFOBOX:

Argumente an die Funktion BOXOUT:

Damit läute ich das nächste Beispiel ein: Ein Verweis zum Ideengeber. Die Referenz wird lediglich mit einem Sprungziel versehen. Um nun einmal eine Farbänderung zu erzeugen, werden für die bisher leeren Argumente für Box und Boxtitel definierte CSS-Klassen in die Funktion INFOBOX übergeben. Das sieht dann so aus.

Beispiel 3: DER IDEENGEBER

 <a href="#zorn" 
 onmouseover="INFOBOX('DER IDEENGEBER', 
 'Auch wenn ich das alles etwas anders mache. Von <a href=#zorn>Herrn Zorn</a> kommt die Anregung hierfür. 
 Somit springt der Verweis zum Anker. ', 3, '', '', 'ja')" 
 onmouseout="BOXOUT(3, 'ja')">zum Ideengeber</a>
 

Der Absatz wird mit der CSS-Klasse "tips" versehen und befolgt wie in CSS-Definitionen 35 zu sehen das Setzen von (!), weil das Sprungziel <a href=#zorn>Herrn Zorn</a> angegeben ist.
Das 4. Beispiel stellt eine reine InfoBox dar, aber mit überschriebenen Klasseneigenschaften.

Beispiel 4: INFOBOX mit anderer Farbe

 <a href="javascript:void(0);" 
 onmouseover="INFOBOX('INFOBOX mit anderer Farbe', 
 'Andere CSS-Klasse, somit anderes Aussehen (arg:4 box_rg, arg:5 boxtitel_rw). 
 Die Schließbox brauchen wir hier nicht. ', 4, 'boxrg', 'boxtrw', '')" 
 onmouseout="BOXOUT(0, '')">so aus</a>
 

Nun stelle ich noch aus der externen CSS-Datei die Formung der Bereiche vor, die auf den Aufruf einer InfoBox hinweisen.

Externe CSS-Definitionen für Hervorhebung des Hinweises und Ankerbehandlung:

Am Ende dieser Beschreibung noch 88 Zeilen des JavaScriptes. Nicht alles entspricht den Bedingungen wie sie von Herrn Zorn vorgegeben sind. Das war auch nicht mein Ziel. Ein Ansatz zur Nachempfindung von InfoBoxen ist, so hoffe ich, gegeben.

Die JavaScript-Datei:

Ach so, ja: Auch wenn mittels createElement() Kindelemente erzeugt werden, auf ein bereits vorhandenes muss zugegriffen werden können. Dem Objekt obj_box werden in 77 alle Kindelemente zugefügt. Das Element mit der ID="infobox" muss vor der Ausführung des Scriptes als auch den Referenzierungen extistent sein.
In 57 und 60 werden den obligatorischen Klassennamen weitere mögliche Definitionen zugefügt (Beispiel 4).
Zum Schluss noch ein alternatives Schließen außerhalb der SchließBox X in 88.