image map über xml festlegen und animieren

[cysign]

Hallo,

ich würde gerne Daten aus eienr XML-Datei auslesen und anhand deren eine HTML-Image-Map erstellen.
Wenn ich jetzt über einen aktiven Bereich der ImageMap fahre, möchte ich die ID dieses Bereichs und seine Koordinaten weiterverwenden.

Im Endeffekt möchte ich damit eine Weltkarte erstellen, die beim Hovern animiert wird wie z.B. www.boralex.com/en/sites .

Als JS-Neuling schaffe ich das aber nicht wie gewünscht

in der HTML-Datei habe ich folgendes stehen:

 <img src="gfx/worldmap/worldmap_blank.gif" class="worldmap" border="0" alt="" usemap="#worldmapmap" />
    <map name="worldmapmap">
      <area shape="rect" id="bereich1" coords="11,10,59,29" href="#" alt="linkname" title="linktitel">
    </map>

und in der js-datei:

$(document).ready(function(){
	for (var i=1; i<5; i++){
		var el = document.getElementById('bereich'+i);
		el.index = i;
		el.onMouseOver = function(){
			alert("test"); /* bzw. die x/y-koordinaten diesses objekts. diese kann ich allerdings auch als variabeln darin speichern, da sie eh per js festgelegt werden sollen */
		};
	}
});

die js-datei ist richtig eingebunden, denn wenn ich ohne Event ein alert ausgebe, bekomm ich dieses ausgegeben.

Die FF-Fehlerkonsole schmeißt mir aus, dass $ nicht definiert ist.

Die Schleife habe ich kopiert von: http://forum.jswelt.de/javascript/49...nsprechen.html (DIVs und H1 mit FOR-Schleife ansprechen), aber ich steig noch nicht ganz dahinter, wie ich sie zum Funktionieren verändern muss

[tsseh]

Die FF-Fehlerkonsole schmeißt mir aus, dass $ nicht definiert ist.

$ ist eine funktion aus einem js-framework. das musst du einbinden, wenn du es nutzen möchtest.

[Hache]

oder du nimmst window.onload() anstatt $(document).ready(

[cysign]

ah, okay, ich hatte mich nämlich schon nach $ dummgesucht und nichts gefunden. Dann wird das wohl zu jQuery gehören, was ich bei der anderen Sache verwendet hatte...Dann bin deich das ejtzt auch ein (das brauch ich später für die Animation) und probier es nochmal. Danke

[Hache]

ah, okay, ich hatte mich nämlich schon nach $ dummgesucht und nichts gefunden. Dann wird das wohl zu jQuery gehören, was ich bei der anderen Sache verwendet hatte...Dann bin deich das ejtzt auch ein (das brauch ich später für die Animation) und probier es nochmal. Danke

Richtig, das $ gehört zu jQuery

[cysign]

so, jetzt ist $ definiert. allerdings bekomme ich nun gesagt, dass "el" = "null" ist...

$(document).ready(function(){
for (var i=1; i<5; i++){
var el = document.getElementById('bereich'+i);
el.index = i;
el.onMouseOver = function(){
alert("test");
};
}
});

<img src="gfx/worldmap/worldmap_blank.gif" class="worldmap" border="0" alt="" usemap="#worldmapmap" />
<map name="worldmapmap">
<area shape="rect" id="bereich1" coords="11,10,59,29" href="#" alt="linkname" title="linktitel">
</map>

Edit: ah, okay, jetzt gehts, hiermit:

$(document).ready(function(){
for (var i=1; i<=200; i++){
var el = document.getElementById('bereich'+i);
el.index = i;
el.onmouseover = function(){
alert(this.id);
};
}
})

Das .onmouseover is casesensitiv...sowas muss man ja auch erstmal wissen :/

[Hache]

dann gibt es das element mit dieser ID wohl nicht.

kleiner Tipp: Wenn du jQuery schon nutzt, dann benutz auch die Selektoren.

Dein Problem würde ich so lösen:
gib allen Bereichen die du ansprechen willst die klasse "bereich"

$(document).ready(function(){
$(".bereich").onMouseOver = function(){
alert("test");
};

});

ist eleganter ;-)

[Junkee[]]

Wird wohl stimmen.

[cysign]

Sorry, ich bin noch n blutiger Anfänger. Hab mich vor Jahren mal mit Actionscript befasst...und wollte damit jetzt eigentlich arbeiten. Aber dann bin ich zu der Überzeugung gekommen, dass JS die bessere Lösung ist, da man keine kostenpflichtige Software braucht und kein optionales Plugin zum Abspielen nötig ist. Da ich kein Streaming nutzen möchte, sehe ich hier keinen Vorteil für Flash.

Der jQuery-Selector spricht also über CSS-Definitionan an? ("." => Klassen & "#" => IDs?)

var el = $("#bereich'+i);

wäre dann also, was ich brauche?
Tuts aber irgendwie nicht.
Ich kann an dieser Stellen nicht mit einer Klasse arbeiten, da jeder Bereich einen anderen Inhalt aufrufen soll...

[kkapsner]

@hacho: onmouseover!
@cysign: Fehlermeldungen sollte man trotzdem beachten und entfernen... so gibt es bei dir z.B. kein Element mit id="bereich200", oder?

[cysign]

Stimmt, so viele brauch ich dann doch nicht. Aber die Selektoren funktionieren dennoch nicht so, wie ich mir das vorstelle. Auskommentiertes funktioniert, das darunter nicht:

/* var el = document.getElementById('bereich'+i); */
var el = $("#bereich'+i);

[kkapsner]

Dann nimm doch das obere - ist sowieso schneller als das von jQuery.

[Hache]

das mag sein, aber meiner Meinung nach ist es einfach komfortabler eine Selektion über die Klassen zu realisieren.

Wenn du allen gewünschten Elementen die Klasse "bereich" gibst, kannst du alle auf einmal ansprechen, bzw die $(".bereich").each(function(){}); benutzen

[Hache]

Stimmt, so viele brauch ich dann doch nicht. Aber die Selektoren funktionieren dennoch nicht so, wie ich mir das vorstelle. Auskommentiertes funktioniert, das darunter nicht:

$("#bereich'+i) kann nie klappen weil die hochkommata falsch gesetzt sind.
Vorschlag:
var id= "#bereich"+i;
var el= $(id)

[Junkee[]]

unnötiges Speichern in Variablen - $("#bereich"+i)
Aber mit Klassen ist es schöner.