Mouseover effect funktioniert nicht

[Soopaman_Luva]

Hi!

Muss für die Uni ein Projekt machen, wo ich den Mouseover Effekt leider nicht hinkriege.

Hier mal die Aufgabenstellung

Ich muss eine SVG Karte von Österreich erstellen und diese dann in eine HTML Seite einbinden. Weiters müssen wir dann über Checkboxes die verschiedenen LAyer (Grenzen, Flüsse, Städte, etc.) ein- und ausblenden können.

Bis hierher war das kein Problem.

Aber jetzt kommt dieser onmouseover effect. Es sollte so sein, dass wenn ich mit der Maus über einen See fahre der Namen links unter der Karte eingeblendet wird.

Wenn ich es programmiert habe und dann im Internet Explorer ausprobiere (Firefox kann das nicht, und für IE habe ich den Adobe svg viewer runtergeladen) kommt immer diese Fehlermeldung.

So, habe insgesamt 3 Dateien, die svg Datei, die html Datei und noch info.svg, eben für den onmouseover effect.

1. SVG Code

  
<g id="Seen" style="fill: darkblue; stroke: darkblue; stroke-width: 4;">  
		<path onmouseover="in_lake(evt,'Neusiedler See')" onmouseout="out_lake(evt)" onclick="showdetail('Neusiedler See')" d="M1983 1099l0 0 2 -11 3 -14 2 -12 2 -3 -2 -18 0 -5 2 -5 5 -16 5 -14 2 -20 0 -13 2 -10 6 -12 14 -7 4 -2 5 -2 12 -12 11 -1 10 3 4 14 3 16 0 13 -9 16 -14 19 -8 21 -14 16 -7 12 -2 10 4 12 -4 11 -3 7 1 7 13 10 7 4 8 3 7 14 7 7 0 9 0 3 -2 4 -7 5 -6 -4 -7 4 -4 5 -9 -2 -7 -3 -7 -4 -1 -10 -2 -9 -5 -1 -2 10 0 9 -5 3 -5 -7 3 -10 -2 -4 -8 -5 -4 -16 0 -12 2 -3z"/>  
:  
:  
:  
</g>  

Hier mal nur der Teil aus der svg wo der onmouseover befehl drin ist. der rest funktioniert. Es gibt dann natürlich noch mehrere Seen.

2a. Hier mal der Javascript Code aus dem HEAD der HTML Seite

  
</SCRIPT>  
<!--Highlight-->  
		<SCRIPT type="text/javascript">  
  
			function in_lake(evt,name){  
				var obj=evt.getTarget(); //return the object related to your mouse  
					obj_style = obj.getStyle();  
					obj_style.setProperty("fill","red"); //highlight the current lake  
  
					//show the lake's name  
				var info=svg_file2.getSVGDocument();  
					text=info.getElementById("laketext");  
					textNode=text.getFirstChild();  
					textNode.setData("Name des Sees: "+name);  
			}  
			//set the lake's color to the default color, when your mouse is in the outside of this lake  
			function out_lake(evt){  
				var obj=evt.getTarget(); //return the object related to your mouse  
					obj_style = obj.getStyle();  
					obj_style.setProperty("fill","#0093DB");  
  
			//show the infomation  
				var info=svg_file2.getSVGDocument();  
					text=info.getElementById("laketext");  
					textNode=text.getFirstChild();  
					textNode.setData("Wählen Sie einen See aus!");	  
  
</SCRIPT>  

2b. Und hier die Einbindung der info.svg in den BODY der HTML Seite

  
<div id="see_namen" style="width:800; height:75; position:absolute; top:870px;  background-color:#0CF; border-style:double;  
    border-color:#FFF; color: #FFF;" >  
	<embed name="svg_file2" src="info.svg" width="600" height="30" type="image/svg+xml"/>  
	</div>  

3. Und jetz noch die info.svg

  
<?xml version="1.0" encoding="UTF-8" standalone="no"?>  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"  
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
  
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 30" width="600" height="30" >  
	<text id="svgtext" x="0" y="30">Waehlen Sie ein Element aus!</text>  
</svg>  
  

Musste auch noch einen mouseclick effect machen, aber der hat ohne Probleme funktioniert.

Hoffe ihr könnt mir helfen.

Danke Soopaman_Luva

[LX]

Ich würde mal mutmaßen, dass der IE das Event nicht korrekt übergibt. Behelfe Dir in den Event-Handlern mit einem beherzten "evt = evt || window.event;"

Gruß, LX

[Soopaman_Luva]

Ich würde mal mutmaßen, dass der IE das Event nicht korrekt übergibt. Behelfe Dir in den Event-Handlern mit einem beherzten "evt = evt || window.event;"

Gruß, LX

Danke für die Hilfe, aber da mir javascript noch neu ist, weiß ich nicht genau, was das oben heißt, bewirkt oder wo ich es hinschreiben muss.

Mit dem IE sollte es ganz normal funktionieren, denn habe noch eine andere Datei, wo der Mouseover effect ohne probleme funktioniert. es is auch der programmcode wie bei meinem projekt hier.

mfg Soopaman_Luva

[Texter mit x]

Aber jetzt kommt dieser onmouseover effect. Es sollte so sein, dass wenn ich mit der Maus über einen See fahre der Namen links unter der Karte eingeblendet wird.

Und warum machst Du das jetzt mit javascript? Mach es doch auch gleich mit SVG.

[apsel]

Om nah hoo pez nyeetz,

Mach es doch auch gleich mit SVG.

http://svg.tutorial.aptico.de/start.php

http://www.w3schools.com/svg/default.asp

http://www.selfsvg.info/?toc

Matthias

[ThomasM]

Hallo Soopaman_Luva,

Wenn ich es programmiert habe und dann im Internet Explorer ausprobiere (Firefox kann das nicht, und für IE habe ich den Adobe svg viewer runtergeladen) kommt immer diese Fehlermeldung.

Firefox, Chrome, Opera und Safari können das auch, wenn nicht die veraltete Adobe-Syntax verwendet wird (der ASV kennt jedoch beide Schreibweisen):

obj.getTarget() --> obj.target
obj.getStyle()  --> obj.style

textNode=text.firstChild;
textNode.nodeValue = "Neuer Wert ...";

usw.

Die Methode setProperty() erwartet übrigens drei Parameter: eigenschaft, wert, priorität (letztere "" oder "important").

Diese getSchreibweisen() sind übrigens eine Unsitte, welche noch immer von Software beibehalten wird und somit wird der IE+ASV vorausgesetzt, obwohl sich die Änderungen leicht browserübergreifend einpflegen ließen.

Zum Auffinden der konkreten Probleme wäre ein kompletter Testcase hilfreich. Probiere mal, den JS-Code driekt innerhalb des SVG-Dokuments auszuführen.

Grüße,
Thomas