image map über xml festlegen und animieren

tsseh · 08. Juli 2010

nicht bei mir???? da geht es erst mit background

kkapsner · 08. Juli 2010

Welcher IE? In meinem IE8/7 funktioniert's dann.

tsseh · 08. Juli 2010

kkapsner schrieb:
Welcher IE? In meinem IE8/7 funktioniert's dann.

ie7

Code:

<html>
  <head>
    <title>test</title>
  </head>
  <style type="text/css">
    #test{
    	position: absolute;
    	top: 20px;
    	left: 50px;
    	width: 200px;
    	height: 100px;
    	border: 1px solid red;
    }
  </style>
    <script type="text/javascript">
      function out(txt, elem)
      {
        var nodeOut = document.getElementById("out");
        var nodeElem = document.createElement(elem || "div");
        var nodeText = document.createTextNode(txt);
        nodeElem.appendChild(nodeText);
        nodeOut.appendChild(nodeElem);
      }
      window.onload = function()
      {
        var test = document.getElementById("test");
        test.onmouseover = function() { out("onmouseover"); }
        test.onclick = function() { out("onclick"); }
      }
    </script>
  <body>
    <div id="test"></div>
    <div id="out"></div>
  </body>
</html>

kkapsner · 08. Juli 2010

1. Quirksmode
2. im IE8 funktioniert's.
3. wenn ich im IE8 auf IE7 im quirksmode stelle funktioniert's, wenn ich aber auf IE7-Standard stelle funktioniert auch mein Beispiel nicht mehr... sehr seltsam - ist hald IE... abr wenn ich dem DIV "test" ein Hintergrundbild gebe, das total transparent ist (z.B. ein 1x1 gif) funktioniert's wieder...

tsseh · 08. Juli 2010

kkapsner schrieb:
3. wenn ich im IE8 auf IE7 im quirksmode stelle funktioniert's,

habe ich noch nicht probiert
EDIT:
gerade probiert, funktioniert nur solange kein anderes element(body scheint egal zu sein) an der mousepointer-stelle verdeckt wird.

kkapsner schrieb:
wenn ich aber auf IE7-Standard stelle funktioniert auch mein Beispiel nicht mehr... sehr seltsam -

auch im echten IE7

kkapsner schrieb:
ist hald IE... abr wenn ich dem DIV "test" ein Hintergrundbild gebe, das total transparent ist (z.B. ein 1x1 gif) funktioniert's wieder...

das stand ja auch als abhilfe im MSDN

cysign · 08. Juli 2010

Ui, danke für euere Bemühungen

Ich werd das gleich mal ausprobieren und hoffe, dass es dann bei mir auch sauber funktioniert.
Wäre denn auch denkbar, dass ich eine div-Box in die zu animierende div-Box lege, die die Animation auslöst?
Das hatte ich eh vor...damit dieses mouseover/mouseout-Spektakel aufhört, wenn man sich im Grenzbereich befindet. Ansonsten wirds halt ne Gif.....wobei mir ne DIV lieber wäre, damit man die Größe hinterher besser anpassen kann... Oder würde ein DIV mir transparentem GIF als Hintergrund gehn?

kkapsner · 09. Juli 2010

... so weit hatte ich gar nicht gelesen

cysign · 09. Juli 2010

un dich hab schon wieder nen IE-Nachteil gefunden:
Wenn ich die Boxen animiere und der Border in CSS mit mehr 1px definiert ist...werden die Boxen immer kleiner - von Animation zu Animation.
Scheinbar rechnet der die Bordergröße zur Boxengröße hinzu oder sowas?!
FF macht mal wieder alles, wie er soll

cysign · 12. Juli 2010

Hmmm....ich schein echt Glück zu haben :[
Kaum klappts im IE und im FF wie es soll, meldet sich der Chrome zu Wort. Beim ersten Hovern mit der Maus gibts keine Animation. Wenn man danach jedoch nochmal über die Box fährt, wird alles richtig animiert.
Hab den aktuellen Stand mal hier hochgeladen.

Code:

var http = null;

var widthdiff=38;
var heightdiff=46;
var highlight="";

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,xsize,detailansicht;
            var irgendwas = ergebnisse[i];

            for (var j = 0; j < irgendwas.childNodes.length; j++) {
                with (irgendwas.childNodes[j]) {
                      if (nodeName == "xworldmap") {
                          xworldmap = firstChild.nodeValue;
                          xworldmap2 = (parseInt(xworldmap)+(widthdiff/2));
                          xworldmap +="px";
                          xworldmap2 +="px";
                          }
                      else if (nodeName == "yworldmap") {
                          yworldmap = firstChild.nodeValue;
                          yworldmap2 = (parseInt(yworldmap)+(heightdiff/2));
                          yworldmap +="px";
                          yworldmap2 +="px";
                          }
                      else if (nodeName == "xsize") {
                          xsize = (firstChild.nodeValue);
                          alert("xsize: " + xsize);
                          xsize2 = (parseInt(xsize)+(parseInt(widthdiff)));
                          ysize = (Math.round((xsize / 1.181)));
                          ysize2 = ((Math.round((xsize / 1.181)))+(parseInt(heightdiff)));
                          xsize+="px";
                          ysize+="px";
                          xsize2+="px";
                          ysize2+="px";
                          alert(xsize);
                          }
                      }
                }

/* #################### Areas-erstellen #################### */
                    /*    Hover Boxen   */
              var div = document.createElement("div");
              div.id="area"+i;
              div.className="areas";
              div.index=i;
              div.style.marginTop="150px";
              /*div.innerHTML=("Area"+i);*/
              div.style.marginLeft=xworldmap2;
              div.style.marginTop=yworldmap2;
              div.style.width=xsize;
              div.style.height=ysize;
              selectionbox.appendChild(div);

                    /*   Animierte Boxen   */
              var auswahldiv = document.createElement("div");
              auswahldiv.id="auswahldiv"+i;
              auswahldiv.index=i;
              /*auswahldiv.innerHTML=auswahldiv.id;*/
              auswahldiv.className="auswahldiv";
              auswahldiv.style.marginLeft=xworldmap;
              auswahldiv.style.marginTop=yworldmap;
              auswahldiv.style.width=xsize2;
              auswahldiv.style.height=ysize2;
              selectionbox.appendChild(auswahldiv);

/* #################### Area-Animation #################### */
            $('#auswahldiv'+i).mouseover(function() {
                        $(this).animate({
                        width: "-="+widthdiff+"px",
                        height: "-="+heightdiff+"px",
                        opacity: 1,
                        marginTop: "+=23px",
                        marginLeft: "+=19px",
                        borderWidth: "1px"
                      }, 200 );
                      });

            $('#auswahldiv'+i).mouseout(function() {
                        /*alert(this.id);*/
                        $(this).animate({
                        width: "+="+widthdiff+"px",
                        height: "+="+heightdiff+"px",
                        marginTop: "-=23px",
                        marginLeft: "-=19px",
                        opacity: 0.2,
                        borderWidth: "1px"
                      }, 200 );
                       this.innerHTML=("");
                      });

/* #################### Area-Action #################### */
            $('#auswahldiv'+i).click(function() {
                          /*this.innerHTML=(this.style.width +"*" + this.style.height);*/
                      });
      }
   }
}

cysign · 12. Juli 2010

außerdem würde ich nun gerne die zweite XML-Datei einbinden.
Ich habe eine JS-Datei analog zu dem xmlareas.js erstellt, die statt der Areas die Punkte auslesen soll.
Die xmlareas.js arbeitet jedoch mit einem window.onload:

Code:

var http = null;

var widthdiff=38;
var heightdiff=46;
var highlight="";

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);
   }
}

Ich weiß nicht, welches Event ich nun nutzen kann, um die zweite XML-Datei einzubinden.
Muss ich denn die Variablen verändern? Sprich http=null; in z.B: http2 umwandeln? Oder ist das ein festgelegter Begriff?

tsseh · 12. Juli 2010

cysign schrieb:
Die xmlareas.js arbeitet jedoch mit einem window.onload:
...
Ich weiß nicht, welches Event ich nun nutzen kann, um die zweite XML-Datei einzubinden.

entweder nutzt du
addEventListener
byw. attachEvent
oder siehst vor der zuweisung auf windows.onload nach, ob dort schon ein handler registriert ist, merkst dir diesen und rufst ihn zusätzlich zu deinem neuen handler auf.

cysign schrieb:
Muss ich denn die Variablen verändern? Sprich http=null; in z.B: http2 umwandeln? Oder ist das ein festgelegter Begriff?

wozu brauchst du diesen code überhaupt 2 mal? schreib dir eine funktion die einen request durchführt und übergebe dieser deine callbackfunktion.

cysign · 12. Juli 2010

hesst schrieb:
wozu brauchst du diesen code überhaupt 2 mal? schreib dir eine funktion die einen request durchführt und übergebe dieser deine callbackfunktion.

hmmm...weil ich ne zweite XML-Datei einbinden möchte...und um ehrlich zu sein keine Ahnung habe, wie ich was machen muss... Ich bin kein Programmierer...und mit der JS-Syntax mache ich mich grad auch erst noch vertraut. Leider wird in fast keinem Tutorial genau auf so ne Problematik eingegangen...

D.h. ich soll ne Funktion schreiben, die nacheinander bei deXMLs abfragt und auswertet?

Außerdem hab ich noch ne Frage...wenn meine Areas hinterher fertig sind, soll an eine Detailansicht rangezoomt werden.
In der Detailansicht sollen die DOTs anklickbar sein, in der Weltkartenansicht jedoch nicht.
Wie kann ich den DOTs in der Detailansicht ne onClick-Funktion zuweisen und sie - bei bedarf - wieder ungültig machen?
Mir reichen auch erstmal Begriffe zum Googeln...

tsseh · 12. Juli 2010

cysign schrieb:
Leider wird in fast keinem Tutorial genau auf so ne Problematik eingegangen...

die problematik heisst hier funktionen.
Wenn man 1 und 1 zusammenrechnen will, schreibt man auch keine 2. funktion für 2 + 2, sondern übergibt die werte als Parameter.

cysign schrieb:
D.h. ich soll ne Funktion schreiben, die nacheinander bei deXMLs abfragt und auswertet?

nein, du sollst eine funktion schreiben, die einen request sendet, und bei antwort des servers eine callbackfunktion aufruft(die du als parameter übergibst), in der du deine behandlung der antwort durchführst.

cysign schrieb:
Wie kann ich den DOTs in der Detailansicht ne onClick-Funktion zuweisen und sie - bei bedarf - wieder ungültig machen?

entweder
https://developer.mozilla.org/en/DOM/element.removeEventListener
bzw.
http://msdn.microsoft.com/en-us/library/ms536411(v=VS.85).aspx
oder elem.onclick=null;

cysign · 12. Juli 2010

Ah, alles klar. Danke für die Antwort

cysign · 14. Juli 2010

hmm.....ich bekomm einen Fehler nicht eleminiert. Daten2 wird 6mal als "is null" ausgewertet. Aber das ANzeigen der Daten2 funktioniert i.d.R.
Es handelt sich um Zeile 141:

Code:

var http = null;
var http2 = null;

var widthdiff=38;
var heightdiff=46;
var highlight="";

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

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

window.onload = function() {
   if (http != null) {
      http.open("GET", "xml/area.xml", true);
      http.onreadystatechange = ausgeben;
      http.send(null);
   }
   if (http2 != null) {
	    http2.open("GET", "xml/dots.xml", true);
      http2.onreadystatechange = ausgeben2;
      http2.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,xsize,detailansicht;
            var irgendwas = ergebnisse[i];

            for (var j = 0; j < irgendwas.childNodes.length; j++) {
                with (irgendwas.childNodes[j]) {
                      if (nodeName == "xworldmap") {
                          xworldmap = firstChild.nodeValue;
                          xworldmap2 = (parseInt(xworldmap)+(widthdiff/2));
                          xworldmap +="px";
                          xworldmap2 +="px";
                          }
                      else if (nodeName == "yworldmap") {
                          yworldmap = firstChild.nodeValue;
                          yworldmap2 = (parseInt(yworldmap)+(heightdiff/2));
                          yworldmap +="px";
                          yworldmap2 +="px";
                          }
                      else if (nodeName == "xsize") {
                          xsize = (firstChild.nodeValue);
                          /*alert("xsize: " + xsize);*/
                          xsize2 = (parseInt(xsize)+(parseInt(widthdiff)));
                          ysize = (Math.round((xsize / 1.181)));
                          ysize2 = ((Math.round((xsize / 1.181)))+(parseInt(heightdiff)));
                          xsize+="px";
                          ysize+="px";
                          xsize2+="px";
                          ysize2+="px";
                          }
                      }
                }

/* #################### Areas-erstellen #################### */
                    /*    Hover Boxen   */
              var div = document.createElement("div");
              div.id="area"+i;
              div.className="areas";
              div.index=i;
              div.style.marginTop="150px";
              div.style.marginLeft=xworldmap2;
              div.style.marginTop=yworldmap2;
              div.style.width=xsize;
              div.style.height=ysize;
              selectionbox.appendChild(div);

                    /*   Animierte Boxen   */
              var auswahldiv = document.createElement("div");
              auswahldiv.id="auswahldiv"+i;
              auswahldiv.index=i;
              auswahldiv.className="auswahldiv";
              auswahldiv.style.marginLeft=xworldmap;
              auswahldiv.style.marginTop=yworldmap;
              auswahldiv.style.width=xsize2;
              auswahldiv.style.height=ysize2;
              selectionbox.appendChild(auswahldiv);

/* #################### Area-Animation #################### */
            $('#area'+i).mouseover(function() {
                        $("#auswahldiv"+this.index).animate({
                        width: "-="+widthdiff+"px",
                        height: "-="+heightdiff+"px",
                        opacity: 1,
                        marginTop: "+=23px",
                        marginLeft: "+=19px",
                        borderWidth: "1px"
                      }, 200 );
                      });

            $('#area'+i).mouseout(function() {
                        /*alert(this.id);*/
                        $("#auswahldiv"+this.index).animate({
                        width: "+="+widthdiff+"px",
                        height: "+="+heightdiff+"px",
                        marginTop: "-=23px",
                        marginLeft: "-=19px",
                        opacity: 0.0,
                        borderWidth: "1px"
                      }, 200 );
                       this.innerHTML=("");
                      });

/* #################### Area-Action #################### */
            $('#area'+i).click(function() {
                                /*ranzoom(this.id);*/
                        $(this.id).animate({
                        borderWidth: "10px"
                      }, 200 ); 
                      });
      }
   }
}

function ranzoom(id){
          getElementById(id).style.border="";
}

/* #################### DOTs auf Worldmap anzeigen #################### */
function ausgeben2() {
   if (http.readyState == 4) {
      var selectionbox = document.getElementById("selectionbox");
      var daten2 = http2.responseXML;
      var ergebnisse2 = daten2.getElementsByTagName("dot");
      for (var i = 0; i < ergebnisse2.length; i++) {
            var land,park,mw,menge,xarea,yarea,xdetail,ydetail,color,mediafile,beschreibung;
            var irgendwas2 = ergebnisse2[i];
            for (var j = 0; j < irgendwas2.childNodes.length; j++) {
                with (irgendwas2.childNodes[j]) {
                   if (nodeName == "land") {
                      land = firstChild.nodeValue;
                   }
                   else if (nodeName == "park") {
                      park = firstChild.nodeValue;
                   }
                   else if (nodeName == "mw") {
                      mw = firstChild.nodeValue;
                   }
                   else if (nodeName == "menge") {
                      menge = firstChild.nodeValue;
                   }
                   else if (nodeName == "xarea") {
                      xarea = firstChild.nodeValue;
                   }
                   else if (nodeName == "yarea") {
                      yarea = firstChild.nodeValue;
                   }
                   else if (nodeName == "xdetail") {
                      xdetail = firstChild.nodeValue;
                   }
                   else if (nodeName == "ydetail") {
                      ydetail = firstChild.nodeValue;
                   }
                   else if (nodeName == "color") {
                      color = firstChild.nodeValue;
                      if (color == "r") {
                          klasse = "dots";
                          }
                      else {klasse = "dotsmarker";}
                   }
                   else if (nodeName == "mediafile") {
                      mediafile = firstChild.nodeValue;
                   }
                   else if (nodeName == "beschreibung") {
                      beschreibung = firstChild.nodeValue;
                   }
                }
             }
    
             var dotdiv = document.createElement("div");
             dotdiv.id="dot"+i;
             dotdiv.className=klasse;
             dotdiv.index=i;
             dotdiv.style.marginLeft = xarea+"px";
             dotdiv.style.marginTop = yarea+"px";
             dotdiv.park = park;
             dotdiv.land = land;
             dotdiv.mw = mw;
             dotdiv.menge = menge;     
             dotdiv.beschreibung = beschreibung;        
             selectionbox.appendChild(dotdiv);
      

    $('#dot'+i).mouseover(function() {
                      this.innerHTML="    "+this.park;
                      });

    $('#dot'+i).mouseout(function() {
                      this.innerHTML="";
                      });

    $('#dot'+i).click(function() {
                      alert(this.park +" ("+this.land+") " +" - " + this.menge + "*" + this.mw+"MW" + " " + this.beschreibung);
                      })
      }
   }
}

Die zugehörige XML ist so aufgebaut:

Code:

<?xml version="1.0"?>
<standorte>
  <dot>
    <land>Irland</land>
    <park>Bindoo</park>
    <mw>1,5</mw>
    <menge>32</menge>
    <xarea>233</xarea>
    <yarea>140</yarea>
    <xdetail>50</xdetail>
    <ydetail>50</ydetail>
    <color>r</color>  <!-- r ist rot und g gruen -->
    <mediafile>weringermeer.jpg</mediafile>
    <beschreibung>Hier haben wir 10 1,5MW Anlagen repariert. Auf Grund des milden Klimas von +75C arbeiteten wir im Taucheranzug. Als positiver Nebeneffekt traten Verbrennungen 7. Grades an der Aussenhaut des Taucheranzugs auf.</beschreibung>
  </dot>
.
.
.
</standorte>

Ich such das jetzt schon seit bestimmt 2 Stunden...aber ich find den Fehler einfach nicht

Ach so, hier noch der Link zur Testseite: spili.aeroconcept.de/temp

cysign · 14. Juli 2010

So, ich hab den Fehler:
für ausgeben2 war

Code:

if (http.readyState == 4)

definiert. Das muss an dieser stelle aber

Code:

if (http2...

sein

tsseh · 14. Juli 2010

ich sehe irgendwie doppelt, oder nein, es ist alles doppelt.
schaffst du es nicht eine funktion zu schreiben?

Code:

function doRequest(url, cb)
{
  var http = null;
  if (window.ActiveXObject) {
    http = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
    http = new XMLHttpRequest();
  }
  http.open("GET", url, true);
  http.onreadystatechange = function()
  {
    if (http.readyState == 4 && (http.status == 200 || http.status == 2)) {
      cb(http.responseXML);
    }
  };
  http.send(null);
}

window.onload = function() {
  doRequest("xml/area.xml", ausgeben);
  doRequest("xml/area.xml", ausgeben2);
}

function ausgeben(daten) {
  var selectionbox = document.getElementById("selectionbox");
  var ergebnisse = daten.getElementsByTagName("area");
  ...
}

function ausgeben2(daten) {
  var selectionbox = document.getElementById("selectionbox");
  var ergebnisse = daten.getElementsByTagName("dot");
  ...
}

cysign · 15. Juli 2010

Wenn ich ehrlich bin: nein.
Ich befasse mich erst seit ein paar Tagen mit JS... und die beiden eingelesenen XML-Dateien haben unterschiedliche Datensätze...weshalb ich nicht weiß, ich ich das besser zusammenfassen soll.
Es ist halt momentan eher Frickelcode - auch wenn ich gerne sauberen Code haben würde...erstmal ist mir wichtig, dass es funktioniert.
Schließlich lerne ich noch - und wenn ich mal halbwegs durchgestiegen bin, werd ich hoffentlich rausfinden, wie ich mir das Leben leichter machen kann

Aber ich hab schon wieder ne Frage:
Sonderzeichen wie Ä,Ö,Ü kann ich ja aus XML auslesen...
Aber wie sieht es aus, wenn ich den Text über das JS direkt ändern möchte, beim ausprobieren?
Bsp: document.getElementById("infoboxtext").innerHTML=("check - hier kann jetzt auch n richtig langer Text mit Ä,Ö,Ü etc. rein.");
Hierbei werden Ä,Ö,Ü falsch ausgegeben.

Außerdem schaff ich es zwar, die Areas inzwischen ranzuzoomen...aber wenn ich wieder herauszoome, funktioniert die Hoverzone nicht sauber.
Ich weiß aber noch nicht, woran es liegt. Vielleicht hat jemand von euch ne Idee?
http://spili.aeroconcept.de/backup/20100715_04_imgscaleback_infotext/
Wenn ich aus einer Area rauszoome, muss ich erst wieder eine andere anwählen, bevor ich an die selbe Area wieder ranzoomen kann, da ich beim click-event zuerst abfrage, ob "old" die selbe ID besitzt, wie das angeklickte Element. Somit fange ich den onclick im herangezoomten Zustand ab.
Ich weiß, dass das alles noch keine saubere Lösung ist...aber ich bin froh, überhaupt erstmal so weit gekommen zu sein

cysign · 16. Juli 2010

So, das mit der Hoverzione lag daran, dass ich beim Ranzoomen eine Schließengrafik eingefügt hatte...beim Rauszoomen hab ich die aber in der Hoverdiv drin gelassen...somit gabs da mehrere Zonen. Beim Rauszoomen lösche ich nun den Inhalt der Box wieder und es läuft wieder sauber.

cysign · 16. Juli 2010

Okay, ich weiß, was ich brauche...weiß aber nicht, wie ich darauf zugreifen kann.
Ich speichere für meine DIV-Boxen namens ("area"+i) jeweils auch einen index ab.
später speichere ich in einer Variabel namens "old" die zuletzt geklickte Area ab.
Ich würde nun gerne über old auf den Index des Variablen, die ich in old gesprichert habe, zugreifen.

bsp:
area3.index=3;
old:area3;

jetzt möchte ich über old auf den Index von area3 zugreifen.
Ich hab mal nach Referenzen gegoogelt...aber keine brauchbaren Ergebnisse bekommen

image map über xml festlegen und animieren

Lounge-Member

Super Moderator

Lounge-Member

Super Moderator

Lounge-Member

New member

Super Moderator

New member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

New member

Lounge-Member

New member

New member

New member