Seite 2 von 6 ErsteErste 123456 LetzteLetzte
Ergebnis 16 bis 30 von 87
  1. #16
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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...
    Geändert von cysign (05-07-2010 um 20:05 Uhr)

  2. #17
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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...
    Geändert von cysign (05-07-2010 um 23:44 Uhr)

  3. #18
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: image map über xml festlegen und animieren

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

  4. #19
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

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

  5. #20
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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?
    Geändert von cysign (06-07-2010 um 02:49 Uhr)

  6. #21
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: image map über xml festlegen und animieren

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

  7. #22
    Hache ist offline Foren As
    registriert
    17-06-2010
    Beiträge
    88

    AW: image map über xml festlegen und animieren

    Zitat Zitat von Junkee[] Beitrag anzeigen
    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.

  8. #23
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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 :[
    Geändert von cysign (06-07-2010 um 19:25 Uhr)

  9. #24
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

  10. #25
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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...
    Geändert von cysign (07-07-2010 um 00:09 Uhr)

  11. #26
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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?
    Geändert von cysign (07-07-2010 um 02:05 Uhr)

  12. #27
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: image map über xml festlegen und animieren

    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.

  13. #28
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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:
    Code:
          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...
    Geändert von cysign (07-07-2010 um 17:22 Uhr)

  14. #29
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: image map über xml festlegen und animieren

    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.

  15. #30
    cysign ist offline Eroberer
    registriert
    30-06-2009
    Beiträge
    53

    AW: image map über xml festlegen und animieren

    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

Seite 2 von 6 ErsteErste 123456 LetzteLetzte

Ähnliche Themen

  1. Navigationsleite Animieren
    Von new_developer im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 29-04-2010, 15:23
  2. background-image über 100% der höhe
    Von rasputin im Forum CSS und (X)HTML
    Antworten: 18
    Letzter Beitrag: 06-01-2007, 22:01
  3. background-image über drei Spalten
    Von wumble im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 22-01-2006, 21:12
  4. site über image zur startseite machen
    Von Jack-da-Ripper im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 20-09-2003, 01:06
  5. Tabellenhöhe über background-image definieren
    Von bine im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 31-08-2003, 22:54

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •