image map über xml festlegen und animieren

[cysign]

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>

<!-- Am ersten Eintrag beschreiben die Kommentare den Sinn der Tags. Einfach kopieren und am unteren Ende das Datei einfügen mit fortlaufender Nummerierung -->


<Punkt Name="Area1">
<Daten>
<Id>1</Id> <!-- increase! keine Nummer doppelt benutzen! -->
<Kurzbezeichnung>Area1</Kurzbezeichnung>
<Xworldmap>50</Xworldmap> <!-- X-Koordinate auf Worldmap -->
<Yworldmap>50</Yworldmap> <!-- Y-Koordinate auf Worldmap -->
<Xsize>40</Xsize>
<Ysize>40</Ysize>
<Detailansicht>name.jpg</Detailansicht> <!-- Name des Detail-Bilds der Area -->
</Daten>
</Punkt>

<Punkt Name="Area2">
<Daten>
<Id>2</Id> <!-- increase! keine Nummer doppelt benutzen! -->
<Kurzbezeichnung>Area1</Kurzbezeichnung>
<Xworldmap>450</Xworldmap> <!-- X-Koordinate auf Worldmap -->
<Yworldmap>250</Yworldmap> <!-- Y-Koordinate auf Worldmap -->
<Xsize>30</Xsize>
<Ysize>23</Ysize>
<Detailansicht>name.jpg</Detailansicht> <!-- Name des Detail-Bilds der Area -->
</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]

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[i];
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[]]

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

[cysign]

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

[cysign]

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?

[Junkee[]]

div.style.marginLeft...
function() { alert(this.index); }
entweder selben zeichensatz verwenden oder einfach ersetztn mit z.B. str_replace

[Hache]

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

jo, stimmt.

Und mit Klassen isses noch besser wie schon vorhin gesagt.

[cysign]

das mit dem Zeichensatz klingt einfacher. Muss ich den in XML definieren? Oder beim Einlesen in JS?

Hast du auch ne Idee, warum das onmouseover nicht funktioniert?
oder wie ich das einbinden könnte?

Außerdem funktioniert mein jQuery Animate nicht

hab ich als einzelne, letzte JS-Datei eingebunden:

$('#area1').click(function() {
$('#area1').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
}, 2000, 'linear');
});

Ich bekomme auch keine Fehlermeldung :[

[Junkee[]]

http://forum.jswelt.de/javascript-fa...erkonsole.html (Wo finde ich die Fehlerkonsole?)

[cysign]

wie gesagt: ich bekomme keine fehlermeldung -.- (wo außer in der fehlerkonsole sollte ich danach suchen?! btw: FF 3.6.6 - gibts nen besseren browser zum fehlersuchen?)

ich möchte hier http://spili.aeroconcept.de/temp/index.htm die roten boxen via xml erstellen und beim klicken animieren...

[cysign]

hmmm....komisch. wenn ich 3 DIVs namens area1-3 manuell erstelle und mein test.js laufen lasse, funktionierts.
wenn ich die DIVs aber mit meiner xmlareas.js aus der XML erstellen lasse...funktioniert die jQuery-Animation nicht mehr.

test.js:

$(document).ready(function(){
$('#area1').mouseover(function() {
$('#area2').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
}, 250, 'linear');
});
$('#area1').mouseout(function() {
$('#area2').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
}, 30, 'linear');
});
})

xmlareas.js:

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 selectionbox = 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[i];
for (var j = 0; j < irgendwas.childNodes.length; j++) {
with (irgendwas.childNodes[j]) {
if (nodeName == "kurzbezeichnung") {
name = firstChild.nodeValue;
}
}
}

var div = document.createElement("div");
div.id="area"+i;
div.className="areas";
div.index=i;
/* div.onclick = alert(this.index); */
selectionbox.appendChild(div);
}
}
}

Wie gesagt, ich bekomme keinen Fehler ausgegeben. Irgendwas in der xmlareas.js scheint jQuerys animate auser Gefecht zu setzen.

Gibt es in Javascript sowas wie ne hit-detection?
Wenn z.B. über position: absolute; zwei DIV-Boxen übereinander liegen, dass eine davon abfragen kann, dass sie die andere berührt?

[kkapsner]

Dein jQuery wird ausgeführt, wenn die Seite geladen ist - genauso dein Laden der XML-Datei, ABER da du das über einen asynchronen HTTPRequest machst werden die DIVs erst erzeugt, wenn dein onload-Event schon längst fertig abgearbeitet ist. Deswegen müsstest du eigentlich auch eine Fehlermeldung bekommen.

Wenn du jetzt die Animation direkt nach dem Erzeugen und Einbinden des DIVs startest sollte alles funktionieren.

PS: Nein, es gibt keine hit-detection. Das musst du dir selbst schreiben.

[cysign]

Also quasi die Animation noch beim Erzeugen der DIVs einbinden?
Ich hab jetzt versucht, das jQuery animate in die DIV-erstellende FOR-Schleife einzubauen. Aber es regt sich immer noch nichts:

      for (var i = 0; i < ergebnisse.length; i++) {
            var kurzbezeichnung,xworldmap,xworldmap,detailansicht;
            var irgendwas = ergebnisse[i];
            for (var j = 0; j < irgendwas.childNodes.length; j++) {
                with (irgendwas.childNodes[j]) {
                   if (nodeName == "kurzbezeichnung") {
                      name = firstChild.nodeValue;
                   }
                }
             }
    
             var div = document.createElement("div");
             div.id="area"+i;
             div.className="areas";
             div.index=i;
             div.style.marginLeft="400px";
/*             div.onclick = alert(this.index); */
             selectionbox.appendChild(div);

            $('#area'+i).mouseover(function() {
                        alert(this.id);
                        $('#area'+i).animate({
                        width: "-=38px",
                        height: "-=46px",
                        opacity: 1,
                        marginTop: "+=23",
                        marginLeft: "+=15px",
                        borderWidth: "4px"
                      }, 200 );
                      });
      }

wobei das alert(this.id) ohne Probleme funktioniert...

[kkapsner]

1. Fehlerkonsole (Wo finde ich die Fehlerkonsole?)!
2. Du verwendest Closures - das ist hier dein Verhängnis.
3. Wieso gehst du überhaupt über die ID des Elements? Du kannst du direkt $(div) bzw. $(this) verwenden.

[cysign]

Das is zwar nett, dass ich immer wieder auf die Fehlerkonsole hingewiesen werde... aber die Firefox-Fehlerkonsole unter strg+shift+j zeigt mir in diesem Fall keine Erroes, Warnings, Messages an
Ich werd mich jetzt mal mit den "Closures" befassen (was auch immer das ist )...hoffentlich komm ich drauf