Die Skripte aufrufen

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

Im Prinzip sind die Skripte nun fertig. Es fehlt allerdings noch der Aufruf der Skripte. Dazu müssen beim Klicken auf die Texte die Skripte angegeben werden, die ausgeführt werden soll. Das geschieht über das onclick-Attribut. In der horizontalen Navigationsleiste verwenden Sie das Attribut im <a>-Tag, das den Hyperlink definiert, in der vertikalen Navigationsleiste wird das Attribut im <text>-Tag verwendet.

Die Funktionsweise ist in beiden Fällen die gleiche. Wenn Sie jedoch einen Hyperlink definieren, wird der Mauszeiger über dem Element entsprechend geändert, über einem normalen Text wird der Mauszeiger nur als Textcursor angezeigt. In der Praxis ist es daher sinnvoller immer den <a>-Tag zu verwenden. Das folgende Beispiel soll jedoch beide Möglichkeiten zeigen.

<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)">Was ist SVG?</text>
  <text x="0" y="260" transform="rotate(-20) translate(-80,0)" onclick="anzeigen(evt,'K02',140,220)">SVG FAQ</text>
  <text x="0" y="290" transform="rotate(-20) translate(-90,0)" onclick="anzeigen(evt,'K03',140,250)">Links</text>
  <text x="0" y="320" transform="rotate(-20) translate(-100,0)" onclick="anzeigen(evt,'K04',140,285)">Beispiele</text>
  <text x="0" y="350" transform="rotate(-20) translate(-110,0)" onclick="anzeigen(evt,'K05',140,140)">Editoren</text>
  <text x="0" y="380" transform="rotate(-20) translate(-122,0)" onclick="anzeigen(evt,'K06',140,360)">Viewer und Tools</text>
</g>
<g id="horizontal" style="font-family:'Arial Black',Helvetica;font-size:12px;fill:rgb(0,0,0)">
  <text x="290" y="115"><a class="schwarz" onclick="aufklh(evt,'Kontakt')">Kontakt |</a></text>
  <text x="361" y="115"><a class="schwarz" onclick="aufklh(evt,'Impressum')"> Impressum |</a></text>
  <text x="452" y="115"><a class="schwarz" onclick="aufklh(evt,'Ziel')"> Ziel der Seite |</a></text>
  <text x="554" y="115"><a class="schwarz" onclick="aufklh(evt,'Projekte')"> Weitere Projekte</a></text>
  <use x="2320" y="330" xlink:href="#smButton" transform="scale(0.3)" style="opacity:0.7" onclick="aufklh(evt,'')"/>
</g>

   

<< 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