• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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
 
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');
});
Zum Vergrößern anklicken....

Ich bekomme auch keine Fehlermeldung :[
 
Zuletzt bearbeitet:
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...
 
Zuletzt bearbeitet:
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');
});
})
Zum Vergrößern anklicken....

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;
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);
}
}
}
Zum Vergrößern anklicken....


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?
 
Zuletzt bearbeitet:
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.
 
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...
 
Zuletzt bearbeitet:
1. 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.
 
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 :D )...hoffentlich komm ich drauf ;)
 
Ah, jetzt hab ichs. Die Closures waren schon richtig gesetzt.
Aber $('area'+i).animate({ konnte nicht funktionieren, weil _in_ dem Closure das i nicht definiert war?
$(this).animate({ jedenfalls funktioniert. Danke :)
 
Und schon häng ich wieder fest :(
mit
Code: 
for (var j = 0; j < irgendwas.childNodes.length; j++) {
                with (irgendwas.childNodes[j]) {
                   if (nodeName == "xworldmap") {
                      xworldmap = firstChild.nodeValue;
                      alert(xworldmap);
                   }
                }
             }
bekomme ich sauber meine beiden xworldmap-werte aus meiner XML-datei.
allerdings liegt diese for-schleife _innerhalb_ der for-schleife, die meine DIV-Boxen erstellt.
Die erste box, die in der äußeren For-Schleife erstellt wird, bekommt uach den zugeordneten xworldmap-Wert.
Die zweite Box bekommt statt der 250 aus der XML-Datei keinen Wert übermittelt.
nun würde ich gerne die FOR-Schleife innerhalb der For-Schleife auflösen, da due äußere schon den Laufindex liefert. Allerdings wieß ich nicht, wie ich dann an den Wert aus der XML-Datei ran komme.
 
Hmpf...dämlicher Fehler. Ich hatte den Wert übergeben...aber keine Einheit. Jetzt hab ich px drangehangen und es funktioniert :)
Code: 
xworldmap = firstChild.nodeValue+"px";
 
Och noe, das gibts doch nciht. Da denk ich, dass ich mal weiter gekommen bin...und dann verarscht mich der Internetexplorer :(
Warum vermietet man dieses blöde Ding nicht endlich?!
Kann vielleicht jemand mal nen Blick drauf werfen?
http://spili.aeroconcept.de/temp/index.htm
und
http://spili.aeroconcept.de/temp/js/xmlareas.js

Im Firefox gehts so, wie es soll...aber im IE gibt der beim Draufklicken die ID nicht aus und das Hovern klappt auch nur einmal.
Bei nem vorherigen Versuch, als ich noch nicht die DIVs aus dem XML erstellen konnte, hat der das aber problemlos mitgemacht.
 
OK - ich hab' das Problem nach langem suchen gefunden: wenn du einem Element im IE eine Transparenz verpasst reagiert es nur noch bei den sichtbaren Teilen (bei dir also der Rand) auf irgendwelche Mausaktionen => Lösung: dem Hauptelement keine Opacity verpassen, sondern ein Kindelement erzeugen, das den Rand und den Text darstellt, und nur diesem die Opacity geben (Bsp: http://kkjs.kkapsner.de/tests/mouseenter+opacity_test.html)
 
kkapsner schrieb:
OK - ich hab' das Problem nach langem suchen gefunden: wenn du einem Element im IE eine Transparenz verpasst reagiert es nur noch bei den sichtbaren Teilen (bei dir also der Rand) auf irgendwelche Mausaktionen
Zum Vergrößern anklicken....
???

kkapsner schrieb:
Lösung: dem Hauptelement keine Opacity verpassen, sondern ein Kindelement erzeugen, das den Rand und den Text darstellt, und nur diesem die Opacity geben (Bsp: http://kkjs.kkapsner.de/tests/mouseenter+opacity_test.html)
Zum Vergrößern anklicken....
ne, du sorgst dafür, das das element, welches die events hat sich nicht verkleinert und dadurch sofort mouseout auslöst.

EDIT: habs gerade mal probiert, du hast recht. es funktioniert nur auf dem "sichtbaren" Teilen.
aber mit der Opacity hat das nichts zu tun. auch ohne diese gesetz zu haben kommen keine events
http://support.microsoft.com/kb/262559/en-us?fr=1
 
Zuletzt bearbeitet:
@hesst: hm... stimmt auch irgendwie - nur ohne opacity reagiert das Element trotzdem auf mouseenter/mouseleave... sonst würde mein Beispiel ja nicht funktionieren.

PS: wenn du von oben links in das Element reinfährst hast du das Wechselspiel zw. mouseenter/leave nicht.
 
kkapsner schrieb:
@hesst: hm... stimmt auch irgendwie - nur ohne opacity reagiert das Element trotzdem auf mouseenter/mouseleave... sonst würde mein Beispiel ja nicht funktionieren.
Zum Vergrößern anklicken....
Bei dir reagiert das "verdeckte" Element (test) auf mouseenter/mouseleave würde ich sagen - ohne das jetzt getestet zu haben - obwohl es auch nichts sichtbares enthällt, weil das ganze ja ein "feature" sein soll und wohl nur einstufig gelöst wurde - reine vermutung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben