image map über xml festlegen und animieren

cysign · 02. Juli 2010

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:

HTML:

 <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:

HTML:

$(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/49650-divs-h1-for-schleife-ansprechen.html, aber ich steig noch nicht ganz dahinter, wie ich sie zum Funktionieren verändern muss

tsseh · 02. Juli 2010

cysign schrieb:
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 · 02. Juli 2010

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

cysign · 02. Juli 2010

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 · 02. Juli 2010

cysign schrieb:
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 · 02. Juli 2010

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 · 02. Juli 2010

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"

Code:

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

});

ist eleganter ;-)

Junkee[] · 02. Juli 2010

Wird wohl stimmen.

cysign · 02. Juli 2010

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?)

Code:

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 · 02. Juli 2010

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

cysign · 02. Juli 2010

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 · 02. Juli 2010

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

Hache · 04. Juli 2010

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 · 05. Juli 2010

cysign schrieb:
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[] · 05. Juli 2010

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

cysign · 05. Juli 2010

So, ham mal wieder ein bisschen weiter gespielt. Allerdings hab ich noch so meine Probleme, XML richtig zu verstehen.

ich würde gerne

<?xml version="1.0"?>
<Areas>



<Punkt Name="Area1">
<Daten>
<Id>1</Id> 
<Kurzbezeichnung>Area1</Kurzbezeichnung>
<Xworldmap>50</Xworldmap> 
<Yworldmap>50</Yworldmap> 
<Xsize>40</Xsize>
<Ysize>40</Ysize>
<Detailansicht>name.jpg</Detailansicht> 
</Daten>
</Punkt>

<Punkt Name="Area2">
<Daten>
<Id>2</Id> 
<Kurzbezeichnung>Area1</Kurzbezeichnung>
<Xworldmap>450</Xworldmap> 
<Yworldmap>250</Yworldmap> 
<Xsize>30</Xsize>
<Ysize>23</Ysize>
<Detailansicht>name.jpg</Detailansicht> 
</Daten>
</Punkt>

</Standorte>

benutzen, um Bereiche festzulegen.
Klar, ich könnte auch in der CSS-Datei die Bereiche definieren, aber dann müsste man, um das später zu ändern, in mehreren Dateien Inhalte ändern. Deshalb möchte ich alles relevante in einer XML-Datei speichern, damit man später hier einfach Einträge ergänzen kann.

Brauch ich IDs in der XML-Datei oder kann ich die weglassen, weil das hinterher in einem Array eh durchnummeriert wird?

Und wie binde ich das in JS ein? Leider steig ich da einfach nicht dahinter...hab mir schon etliche Tutorials angeschaut, aber mit den Childnodes etc. blick ich nicht durch.

* childNodes - Unterelement vergleichbar mit einem Array aller Unterknoten. Die einzelnen Knoten können der Reihenfolge nach per Index angesprochen werden. Achtung: Internet Explorer und Firefox verhalten sich hier ein wenig unterschiedlich.
* nodeName - gibt den Namen des Knotens an. Bei Elementen ist dies der Elementname, bei Attributen der Attributname usw.
* nodeType - gibt den Typ des Knotens an. Mögliche Werte sind u.a. 1 (Element), 2 (Attribut), 3 (Text), 8 (Kommentar).
* nodeValue - gibt den Wert des Knotens. Bei Attributknoten ist dies der Attributwert, bei Kommentaren der Kommentar selbst. Bei Elementen ist dieser Wert leer bzw. null.
* parentNode - gibt den Elternkonten
* tagName - den Tag-Namen (<name ...>)

... und folgende Methoden:

* getAttribute(Name) - gibt den zum übergebenen Attributnamen definierten Wert.
* getElementsByTagName(Name) - gibt ein Array aller Unterelemente die den übergebenen Namen tragen (<name ...>)
* hasChildNodes() - gibt an, ob das Element weitere Unterknoten besitzt (true) oder nicht (false).

Aber was ist an meinem Beispiel gesehn ein Knoten etc.?

Und was muss ich beachten, dass es hinterher im IE und im FF gleich funktioniert? Childnodessollen sich da ja unterschiedlich verhalten?!
Es muss nur mit dem IE8 (und folgenden) und aktuellen Firefox/Opera/Chrome sauber funktionieren. Abwärtskompitibilität darunter möchte ich nicht realisieren - solche User sollten mal mit der Zeit gehn...

cysign · 05. Juli 2010

So, ich hab mir ein Bespiel rausgesucht und es ein bisschen umgestrickt. Jetzt kann ich aus der XML heraus DIV-Boxen erstellen.
Allerdings weiß ich nicht, wie ich den DIV-Boxen eine ID und eine class zuürdne, um diese über die class via CSS zu definieren und spiäter mit ihrer ID ansprechen zu können.

auerdem hab ich die XML verkleinert, da ich dort nicht mehr daten brauche:

<?xml version="1.0"?>
<areas>
<area>
<kurzbezeichnung>Area1</kurzbezeichnung>
<xworldmap>50</xworldmap>
<yworldmap>50</yworldmap>
<highlight>0</highlight>
<detailansicht>name.jpg</detailansicht>
</area>

<area>
<kurzbezeichnung>Area2</kurzbezeichnung>
<xworldmap>250</xworldmap>
<yworldmap>250</yworldmap>
<highlight>1</highlight>
<detailansicht>name.jpg</detailansicht>
</area>
</areas>

mein js-code sieht so aus:

var http = null;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http = new ActiveXObject("Microsoft.XMLHTTP");
}

window.onload = function() {
if (http != null) {
http.open("GET", "xml/area.xml", true);
http.onreadystatechange = ausgeben;
http.send(null);
}
}

function ausgeben() {
if (http.readyState == 4) {
var selectionkiste = document.getElementById("selectionbox");
var daten = http.responseXML;
var ergebnisse = daten.getElementsByTagName("area");
for (var i = 0; i < ergebnisse.length; i++) {
var kurzbezeichnung,xworldmap,xworldmap,detailansicht;
var irgendwas = ergebnisse;
for (var j = 0; j < irgendwas.childNodes.length; j++) {
with (irgendwas.childNodes[j]) {
if (nodeName == "kurzbezeichnung") {
name = firstChild.nodeValue;
}
}
}

var div = document.createElement("div");
selectionkiste.appendChild(div);
}
}
}

im dickgedruckten Bereich werden die DIVs erzeugt. Allerdings habe ich keine Ahnung, wie ich jetzt ID und class anhänge

Und gibts ne Möglichkeit, wie ich meine DIVs sehen kann? Quelltext anzeigen klappt ja bei sowas nicht...aktuell benutze ich Chris Padericks Web Developer Toolbar dafür...

Junkee[] · 05. Juli 2010

div.id ="id";
div.className =class";

cysign · 05. Juli 2010

sehr, sehr schön, danke

ich hab als id div.id="area"+i; genommen, dmait ich die später zuordnen kann

cysign · 05. Juli 2010

Ich würde gerne noch andere Attribute anhängen, nämlich nen margin-left, margin-top, height und width, allerdings klappen hier weder normale CSS-Befehle noch div.setAttribute("width", "50px", 0); , was ich eben beim Googeln gefunden habe...

Außerdem funktioniert ein mouseover bei den erzeugten DIVs nicht:

var div = document.createElement("div");
div.id="area"+i;
div.className="areas";
div.index=i;
div.onmouseover = alert(this.index);
selectionkiste.appendChild(div);

Logisch, ich definiere das MouseOver bevor der Element existiert. Aber selbst wenn ich es später definiere kommt ein "undefined" als Fehlerausgabe...

Edit: Argh, wie mach ich das denn am besten mit Sonderzeichen alla Ä,Ö,ß, etc. ?
Ich kann die nicht in der XML umbenennen, da hinterher jemand hier Daten einpflegen soll, der keine Ahnung davon hat...da würde mit Sicherheit was schief gehn. Kann man beim Einlesen der XML Sonderzeichen automatisch escapen/Umwandeln?

image map über xml festlegen und animieren

New member

Lounge-Member

New member

New member

New member

New member

New member

Lounge-Member

New member

Super Moderator

New member

Super Moderator

New member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

New member