Skripte hinzufügen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Jetzt fehlen natürlich noch die Skripte. Deren Aufgabe ist es,

• die rechteckigen Kästen an der gewünschten Position einzublenden,
• beim Hovern über den "Schließen"-Button den Tooltip einzublenden,
• beim Klicken auf den "Schließen"-Button den Kasten auszublenden,
• und beim Öffnen eines Kastens alle anderen auszublenden.

Dazu sind verschiedene Funktionen und ein paar globale Variablen erforderlich, die nachfolgend vorgestellt werden. Zunächst einmal ist ein <script>-Tag notwendig, in den die Funktionen eingefügt werden. Der könnte wie folgt lauten, wenn Sie dabei gleich die globalen Variablen min und max definieren. min legt die Nummer des ersten rechteckigen Kastens fest (für K01) und max die Nummer des letzten Kastens. Daher müssen Sie diese Angaben gemäß Ihren Anforderungen anpassen. Die führenden Nullen werden dabei jedoch vom Skript ergänzt.

Nun müssen natürlich noch innerhalb des Tags die Funktionen definiert werden. Die Funktion hovern( ) wird ausgeführt, wenn der Mauszeiger sich über dem "Schließen"-Button bewegt (onmouseover) und wenn der Button wieder verlassen wird (onmouseout). Als Erstes weist sie der Variablen button das Objekt zu, das das Event ausgelöst hat. Dazu wird die getTarget( )-Methode aufgerufen, die das Objekt zurückgibt.

Hinweis:
Anstelle der Methode getTarget( ) könnten Sie auch die Eigenschaft evt.target verwenden. Sie gibt das gleiche Objekt zurück, funktioniert aber leider nicht im Netscape Navigator.

Ist dieses Objekt einmal ermittelt, lässt sich damit das svgdocument-Objekt der Grafik ermitteln, indem mit der Methode getOwnerDocument das übergeordnete Dokument des Buttons ermittelt wird. Diese Methode gibt in der Regel ein svgDocument-Objekt zurück, das nachfolgend dazu genutzt wird, auf benannte Elemente der Grafik zuzugreifen. Zur Berechnung des Namens für den ein- bzw. auszublendenden Tooltip benötigen Sie allerdings den Namen des Elements, der über das id-Attribut bestimmt wurde.

Alle Attribute eines Elements können Sie über die Methode getAttribute des Elements abrufen. Dazu übergeben Sie als Parameter den Namen des Attributs, wobei Sie natürlich auf Groß- und Kleinschreibung achten müssen. In der Funktion wird daher mit var bname=button.getAttribute("id"); die id des Elements in der Variablen bname gespeichert. Dieser Wert wird dann zur Berechnung des Namens für den Tooltip verwendet, indem er durch ein "T" ergänzt wird.

Mit der Methode getElementById(tname) wird dann der Tooltip als Objekt zurückgegeben und in der Variablen ttipp gespeichert. Anschließend wird das style-Objekt, das dem style-Attribut des Tags entspricht, in der Variablen ttippStyle gespeichert. Über dieses Objekt ist dann der Zugriff auf einzelne Eigenschaften des style-Attributs oder die gesamte Zeichenkette möglich. Hier wird geprüft, ob das style-Attribut der Zeichenfolge visibility:inherit entspricht. In diesen Fall wird innerhalb der if-Anweisung die setAttribute-Methode verwendet, um das Attribut style auf den Wert visibility:hidden festzulegen. Im anderen Fall, also wenn der Tooltip augenblicklich nicht sichtbar ist (visibility:hidden), wird er mit visibility:inherit eingeblendet. Sichtbar wird er dadurch, dass zu diesem Zeitpunkt die übergeordnete Gruppe sichtbar ist und der Wert inherit bestimmt, dass das Element den Wert des übergeordneten Elements für die Eigenschaft annimmt.

Die if-Anweisung sorgt somit dafür, dass der Tooltip aus- und wieder eingeblendet wird, ja nachdem, ob er gerade sichtbar ist oder nicht.

Die Funktion Einblenden sorgt dafür, dass die Kästen eingeblendet werden. Dazu werden jedoch mehrere Parameter übergeben. Der Parameter evt definiert wieder das Element, das das Ereignis ausgelöst hat. Er wird vom Skriptinterpreter an die Funktion übergeben. Der Parameter elemName gibt den Namen des Elements an, das eingeblendet werden soll. Dies ist notwendig, da das Element, das eingeblendet werden soll, ja nicht identisch mit dem Element ist, auf das geklickt wird und daher vom evt-Parameter angegeben wird. Die beiden Parameter x und y ermöglichen es, die Zielposition für die Anzeige zu bestimmen. Auch hier werden wieder diverse Variablen deklariert. Das Element, das das Ereignis ausgelöst hat, wird hier der Variablen hlink zugewiesen, da es sich um einen Hyperlink handelt. Mit der Anweisung var Nstring=new String(elemName); wird aus dem als Parameter elemName übergebenen ein String-Objekt erzeugt. Das ist notwendig, um das erste Zeichen abzuschneiden. Das ermöglicht dann nämlich die Berechnung des Namens für den Tooltip, der angezeigt und ausgeblendet werden soll. Die Berechnung des Namens erfolgt mit der Anweisung var bname="TI" + Nstring.substr(1,Nstring.length-1);.

Die substr-Methode gibt einen Teilstring zurück, der beim Zeichen mit dem Index 1 beginnt. Dies ist das zweite Zeichen, weil das erste den Index 0 hat. Die Länge der Zeichenkette wird durch Nstring.length-1 berechnet. Die length-Eigenschaft gibt die Länge des Strings zurück. Weil ja das erste Zeichen abgeschnitten werden soll, muss davon eins abgezogen werden. Dem so ermittelten Teilstring wird dann die Zeichenkette "TI" vorangestellt. Sie wird verwendet, um wieder mit der getElementById-Methode den Tooltip als Objekt zurückzugeben.

Im Anschluss werden alle Kästen in einer Schleife von min bis max durchlaufen. Dabei wird geprüft, ob sie augenblicklich sichtbar sind. In diesem Fall werden sie mit elem.setAttribute("style", "visibility:hidden"); ausgeblendet. Das stellt sicher, dass immer nur ein Kasten angezeigt wird. Damit der Name zum Zugriff auf das Element jedoch korrekt berechnet werden kann, muss geprüft werden, ob der Wert der Laufvariablen I kleiner als 10 ist. In diesem Fall muss eine 0 vor der Zahl ergänzt werden. Dafür sorgt die erste if-Anweisung innerhalb der for-Schleife. Anschließend müssen noch die erforderlichen Elemente ein- und ausgeblendet werden. Dazu wird das style-Attribut mit der setAttribute-Methode gesetzt. Um die Gruppe zu positionieren, wird zusätzlich für die Gruppe auch das transform-Attribute neu gesetzt. Als Zielpositionen werden die beiden Parameter x und y verwendet.

Um die halbrunden Kästen anzeigen zu lassen, müssen Sie natürlich auch noch eine Funktion schreiben. In der Funktion müssen Sie sicherstellen, dass alle Kreise ausgeblendet werden, bevor die anderen eingeblendet werden. Damit die ausgeblendeten im Hintergrund aber schwach sichtbar bleiben, wird dazu einfach nur die Deckkraft herabgesetzt. Das übernimmt die Funktion aufklh. Zunächst wird wieder einer Variablen hlink die Referenz auf das Element zugewiesen, das das Event ausgelöst hat, das als Parameter evt an die Funktion übergeben wurde. Im Anschluss wird das SVG-Dokument über die Methode getOwnerDocument( ) zurückgegeben und der Variablen svgdok zugewiesen. Über die Variable werden dann für alle Elemente mit der Methode setAttribute die Eigenschaft opacity gesetzt. Zum Schluss wird mit der if-Anweisung geprüft, ob der Parameter strName ungleich einer leeren Zeichenfolge '' ist. In diesem Fall wird die Eigenschaft opacity des Elements, das mit strName angegeben wurde, auf 0.5 gesetzt.

Diese Abfrage stellt sicher, dass Sie die Funktion auch einsetzen können, um alle Kreise auszublenden. Dann brauchen Sie einfach nur eine leere Zeichenfolge als zweiten Parameter zu übergeben. Das wird beim Aufrufen der Funktion deutlich, wenn sie auch beim Anklicken des Buttons in der horizontalen Navigationsleiste ausgeführt wird.