JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 450

</body>
</html>
Auf den Kreis in der Graik wollen wir in der JavaScript-Datei kap14_30.js zugreifen:
Listing 14.65■ Zugrif auf den Kreis in der SVG-Graik
window.onload=function() {
document.getElementsByTagName("circle")[0].onmouseover=function(){
this.style.ill = "yellow";
};
document.getElementsByTagName("circle")[0].onmouseout=function(){
this.style.ill = "green";
};
}
Sie sehen, dass der Zugrif auf den Kreis fast unverschämt einfach ist. Denn da wir XML
vorliegen haben, arbeiten wir mit einem node -Objekt und darauf können Sie mit den
gewohnten Methoden zugreifen, sowohl was die Selektion angeht als auch die dynamische
Gestaltung über das style -Objekt.
Bild 14.32■
Die Farbe des Kreises wurde dynamisch
geändert, wenn sich der Mauszeiger in dem
Bereich beindet.
14.5.3■CSS3-Keyframes
Zum Abschluss wollen wir JavaScript verlassen und einen kurzen Blick auf Techniken im
CSS-Umfeld werfen, die mit den Canvas - und SVG-Techniken konkurrieren und von den
Eigenschaten und Werten meist sehr ähnlich aussehen. Mit dem CSS3-Befehl keyframes
steht Ihnen ein gar mächtiges Werkzeug zur Seite, mit dem man rein auf Basis von CSS
sogar Animationen erstellen kann. Dazu gibt es die Eigenschaten, wie sie etwa bei SVG,
Canvas oder Java2D schon lange bekannt sind. Betrachten Sie folgende CSS-Datei (kap14_31.
css):
Listing 14.66■ Animationen mit CSS3
@-moz-keyframes fade {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }
}
@-webkit-keyframes fade {
0% { opacity: 0.1; }
50% { opacity: 1; }
100% { opacity: 0.1; }