Soopaman_Luva: Mouseover effect funktioniert nicht

Beitrag lesen

SELF-Forum

Mouseover effect funktioniert nicht

Soopaman_Luva
– Informationen zu den Bewertungsregeln

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.

Fehlerbild

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

Beitrag melden
–
Informationen zu den Bewertungsregeln