Kinder ansprechen...

[JacksLostLife]

Hallo

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(&#39;helge&#39;);
test.firstChild.setAttribute(&#39;onclick&#39;,"peter()");
}

function peter() {alert(&#39;text&#39;);}

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

Hoffentlich kann mir jemand helfen, ich finde im Netz einfach nix, und weiss auch nicht woran es genau liegt...Broswer, mir, JS...

[Thomas Meinike]

Hallo,

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:

Hier in reparierter Form:

<?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(evt) {
document = evt.target.ownerDocument;
var test = document.getElementById("helge").getElementsByTagName("rect");
var anz=test.length;
for(i=0;i<anz;i++)test.item(i).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>

Hoffentlich kann mir jemand helfen, ich finde im Netz einfach nix, ...

Unter http://svglbc.datenverdrahten.de sollte etwas zu finden sein.

BTW: Ich wuerde noch den SVG 1.0-DOCTYPE einsetzen, da 1.1 z. B. vom ASV 3.01 nicht erkannt wird und eine Fehlermeldung in der Statusleiste erscheint. Neue Elemente/Attribute/CSS-Eigenschaften hat die Version 1.1 ja nicht definiert, nur SVG modularisiert.

MfG, Thomas

[JacksLostLife]

var anz=test.length;
for(i=0;i<anz;i++)test.item(i).setAttribute("onclick","peter()");

An so eine Lösung habe ich ja noch garnicht gedacht...
Vielen Dank!!!

BTW: Ich wuerde noch den SVG 1.0-DOCTYPE einsetzen, da 1.1 z. B. vom ASV 3.01 nicht erkannt wird und eine Fehlermeldung in der Statusleiste erscheint.

Ah, ich fragte mich schon immer, ob ich irgendwas flasch gemacht habe, wegen der fehlermeldung... *g*

Danke Thomas!