XML-Technologien / SVG / Interaktive Grafiken / Lösungen

Lösungen zu Interaktive Grafiken

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

Opera 4.x und 5.x, Internet Explorer für MacOS und Netscape 6 bzw. Mozilla führen Skripte nicht korrekt aus, auch wenn der SVG-Viewer installiert ist. Von Mozilla gibt es allerdings eine Version, die schon eine rudimentäre SVG-Unterstützung ohne Plug-In bietet. Allerdings ist Skripting auch dort noch nicht vollständig implementiert.
Skripte werden in einem <script>-Tag definiert, der sich wiederum in einem CDATA-Abschnitt befindet.
Um die Navigationsleiste zu erstellen, sind folgende Tags notwendig. Dies ist allerdings nur eine mögliche Lösung. Statt eines Symbols können Sie natürlich auch verschiedene <rect>-Tags verwenden.

<defs>
  <symbol>
    <rect id="kasten" x="0" y="0" width="100" height="25" />
  </symbol>
</defs>
<a xlink:href="kontakt.htm">
  <use xlink:href="#kasten" transform="translate(0,0)"/>
  <text x="20" y="17">Kontakt</text>
</a>
<a xlink:href="service.htm">
  <use xlink:href="#kasten" transform="translate(100,0)"/>
  <text x="120" y="17">Service</text>
</a>
<a xlink:href="referenzen.htm">
  <use xlink:href="#kasten" transform="translate(200,0)"/>
  <text x="203" y="17">Referenzen</text>
</a>

Um die Rechtecke zu formatieren, fügen Sie einfach ein Stylesheet für den <rect>-Tag und den <text>-Tag in die Datei ein.

<style type="text/css">
  <![CDATA[
    text {fill:white;font-family:Arial,Helvetica;font-size:14px;font-stretch:expanded;font-weight:bold}
    rect {fill:darkblue;stroke:none}
  ]]>
</style>

Um den Hinweiskasten zu ergänzen ist ein zusätzliches Symbol

<rect class="hinweis" id="hinweiskasten" x="0" y="25" width="300" height="25" />

notwendig, das dann mit

<use id="hkasten" xlink:href="#hinweiskasten" style="visibility:hidden"/>
<text id="htext" class="hinweis" x="3" y="40" style="visibility:hidden">Hinweis</text>

eingefügt wird. Die zusätzlichen Stylesheets

rect.hinweis {fill:darkblue;stroke:none;fill-opacity:0.5}
text.hinweis {fill:white;font-family:Arial,Helvetica;font-size:13px;font-stretch:ultra-condensed;font-weight:bold}

sorgen für die Formatierung.

Damit der Text im Hinweiskasten angezeigt wird, sind folgende Funktionen erforderlich:

<svg width="300" height="50" onload="init(evt)">
  ...
  <script type="text/ecmascript">
    <![CDATA[
      var svgdok;
      function init(evt)
      {
        var i=0;
        svgdok=evt.getTarget().getOwnerDocument();
      }
      function hovern(evt,strText)
      {
        var sichtbarkeit;
        var objStyle;
        var objStyle2;
        var elem;
        var elem2;
        var ziel;
        ziel=evt.getTarget().getParentNode();
        elem=svgdok.getElementById("hkasten");
        elem2=svgdok.getElementById("htext");
        elem2.getFirstChild().setNodeValue(strText);
        objStyle=elem.getStyle();
        objStyle2=elem2.getStyle();
        sichtbarkeit=objStyle.getPropertyValue("visibility");
        if (sichtbarkeit=="hidden")
        {
          objStyle.setProperty("visibility","visible");
        }
        else
        {
          objStyle.setProperty("visibility","hidden");
        }
        objStyle2.setProperty("visibility",objStyle.getPropertyValue("visibility"));
      }
    ]]>
  </script>

Außerdem müssen die Navigationselemente natürlich noch mit Event-Attributen versehen werden. Dazu ist es günstig, sie zu gruppieren. Den anzuzeigenden Text übergeben Sie einfach als zweiten Parameter an die Funktion hovern( ).

<g onmouseover="hovern(evt,'Wegbeschreibung, Anschrift, Kontaktformular und Gästebuch.')" onmouseout="hovern(evt,'')">
  <a xlink:href="kontakt.htm">
    <use xlink:href="#kasten" transform="translate(0,0)"/>
    <text x="20" y="17">Kontakt</text>
  </a>
</g>

Hervorheben können Sie die gehoverten Elemente am einfachsten, indem Sie deren Farbe ändern. Sie können dazu bspw. die Transparenz anpassen. Dazu ist die if-Anweisung der Funktion hovern( ) wie folgt zu ergänzen.

if (sichtbarkeit=="hidden")
{
  objStyle.setProperty("visibility","visible");
  ziel.getStyle().setProperty("opacity","0.7");
}
else
{
  objStyle.setProperty("visibility","hidden");
  ziel.getStyle().setProperty("opacity","1");
}

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

XSLT

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de