Ärger mit den Kindern (JS / DOM )

[JacksLostLife]

Morsche!

Ich habe folgendes Problem: Ich will eine SVG Seite machen. Da dort mehrere Elemente beim draufklicken was machen sollen, hab ich mir gedacht, machst du alles einfach ein bischen kleiner und übersichtlicher indem du jedem dieser Elemente per JSFunktion und DOM einfach nen Mouseover Effekt einhängst, welcher ne andere Funktion startet.

Das geht auch ganz gut, WENN die jeweiligen Elemente IDs haben somit direkt per getElementById ansprechbar sind, ABER die sollen keine IDs haben, da dann ja wieder meine Platzersparnis flöten gegangen ist.

Also hab ich gedacht, machst du es halt mit firstChild oder lastChild, da ich die betreffenden Elemente eh in Gruppen (<g>) drinnen hab wo sie ruhig immer am Ende stehen können.

Aber aus mir unerfindlichen Gründen geht die Page dann nicht mehr!

-"Das Objekt unterstützt die Eigenschaft oder Methode nicht"

Hier mein Code:

---------------------------------------------------------------------

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg onload="initialize(evt)" xmlns="http://www.w3.org/2000/svg"

width="50cm" height="50cm">

<script type="text/ecmascript">

<![CDATA[

var document = null;

function initialize(LoadEvent) {

document = LoadEvent.getTarget().getOwnerDocument();

var test = document.getElementById('helge');

test.firstChild.setAttribute('onclick',"peter()");

}

function peter() {alert('text');}

]]>

</script>

<g id="helge">

<rect x="10" y="10" width="20" height="20" fill="red"/>

<rect x="10" y="40" width="20" height="20" fill="red"/>

<rect x="10" y="70" width="20" height="20" fill="red"/>

<rect x="10" y="100" width="20" height="20" fill="red"/>

</g>

</svg>

-------------------------------------------------------------------------

Es wäre echt toll, wenn mir jemand helfen kann, ich krebse schon seit heute morgen daran herum...

Danke,

der Marcus