Die visible-Eigenschaft manipulieren

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

Möchten Sie eine SVG-Grafik verwenden, die ähnlich wie eine Flash-Webseite fungiert und auf Maus-Ereignisse reagiert, kommt es häufig vor, dass Sie Elemente der Webseite ein- und wieder ausblenden müssen. Dazu müssen Sie zunächst im style-Attribut des Elements oder der übergeordneten Gruppe die Eigenschaft visibility definieren. Dazu stehen drei mögliche Werte zur Verfügung. Mit visibility:visible ist das Element sichtbar, visibility:hidden blendet es aus und mit visibility:inherit wird es abhängig von der Sichtbarkeit des übergeordneten Elements sichtbar gemacht. Übergeordnet ist ein Element immer dann, wenn es das eingeschlossene umschließt. Wenn bspw. eine Gruppe mehrere Elemente enthält, ist für alle Elemente die Gruppe das übergeordnete Element, nicht aber das davor definierte Element.

Die Nutzung der visible-Eigenschaft zeigt das nachfolgende Beispiel. Es fügt der Grafik navbanner.svg, die Sie schon aus den vorhergehenden Kapiteln kennen, Kästen mit Texten hinzu, die eingeblendet werden, wenn der Benutzer mit der Maus auf die entsprechenden Texte der Navigationsleiste klickt. Für jeden Kasten wird außerdem ein Button eingeblendet, über den der Kasten wieder ausgeblendet werden kann. Wird mit der Maus über den Button gefahren, wird ein Tooltip eingeblendet, mit einem Hinweis auf die Funktion des Buttons.

Abbildung: Zu erzeugende Funktionen in der navbanner.svg-Grafik.

   

• Notwendige Symbole erzeugen
• Kasten erstellen
• Skripte hinzufügen
• Die Skripte aufrufen
• Anzeige optimieren

   

<< zurück

vor >>