Formatierungen verändern
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
Im vorherigen Beispiel wurden im Wesentlichen Elemente ein- und ausgeblendet, indem die visible-Eigenschaft gesetzt wurde. Sie können aber natürlich auch mehrere Eigenschaften gleichzeitig setzen. Das funktioniert im Prinzip ganz ähnlich, indem Sie mehrere Eigenschaften des style-Attributs ändern. Noch einfacher ist es aber, wenn Sie über das class-Attribut ein anderes Stylesheet zuweisen. Damit können Sie dann auf einen Schlag mehrere Formatierungen ändern.
Das bisher verwendete Beispiel können Sie ganz leicht dahingehend ergänzen, dass beim Überfahren der vertikalen Navigationselemente mit der Maus die Schriftfarbe geändert wird. Wenn Sie außerdem noch möchten, dass der Mauszeiger wie bei einem Hyperlink angezeigt wird, können Sie dazu einfach einen <a>-Tag ergänzen. Dem Attribute onmouseover weisen Sie dann einen Funktionsaufruf zu, der das Stylesheet a.schwarz zuweist, und beim Verlassen des Elements weisen Sie wieder das Format a.weiss zu. Wenn Sie dazu den Namen des Stylesheets an die Funktion übergeben, können Sie die gleiche Funktion in verschiedenen Situationen verwenden. Der Aufruf einer solchen Funktion mit dem Namen linkshovern könnte bspw. wie folgt aussehen.
<g id="vertikal" style="font-family:'Arial Black',Helvetica;font-size:12px;fill:rgb(0,0,0)">
<text x="0" y="230" transform="rotate(-20) translate(-70,0)" onclick="anzeigen(evt,'K01',140,180)">
<a class="weiss" onmouseover="linkshovern(evt,'schwarz')" onmouseout="linkshovern(evt,'weiss')">Was ist SVG?</a>
</text>
...
</g>
Nun fehlt natürlich noch die Funktion, die das Stylesheet zuweist, das als zweiten Parameter an die Funktion übergeben wurde. Die definieren Sie wieder im <script>-Tag der Grafik.
function linkshovern(evt,klasse)
{
var hlink=evt.getTarget();
hlink.setAttribute("class",klasse);
}
Das Ergebnis sieht dann folgendermaßen aus, wenn Sie mit der Maus über die vertikale Navigationsleiste fahren.
Abbildung: Textfarbe beim Hovern ändern.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
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