image map über xml festlegen und animieren

[cysign]

Danke für die Ratschläge. Auf die Callbackfunktion hätte ich ja auch mal selber kommen können

[cysign]

Schade, ich dachte, die Callback-Funktion wird ausgeführt, wenn die Animation fertig ist...aber leider bekomme ich ein alert("test") direkt ausgegeben.
Es klappt auch nicht, dass ich ein Delay an das alert hänge alla alert("test").delay(1000).

[cysign]

Sehr schön - endlich kommen die Punkte, wenn die Animation fertig ist. Dazu kommen sie noch brav nacheinander und nicht gleichzeitig, was schöner aussieht

Benutzt habe ich dazu ein dalay-Plugin für jQuery:

$.fn.delay = function(time, callback){
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}

von http://james.padolsey.com/javascript...-delay-plugin/.

Dazu habe ich meinen code folgendermaßen verändert:

var timeding = 1000; <!-- Einfadezeit der DOTs -->
for (var i = 0; i < ddots.length; i++){
	document.getElementById(ddots[i]).style.zIndex=7;
	document.getElementById(ddots[i]).style.visibility="hidden";
	document.getElementById(ddots[i]).className="dotsdetail";
	document.getElementById(ddots[i]).style.marginLeft = document.getElementById(ddots[i]).xdetail+"px";
	document.getElementById(ddots[i]).style.marginTop = document.getElementById(ddots[i]).ydetail+"px";
	var tempi = document.getElementById(ddots[i]);
	timeding += 200;
	$("#"+tempi.id).delay(timeding, function(){
                $(this).css({
                    visibility: 'visible'
                    });
                });
}

[tsseh]

Schade, ich dachte, die Callback-Funktion wird ausgeführt, wenn die Animation fertig ist

wird sie auch

...aber leider bekomme ich ein alert("test") direkt ausgegeben.

dann rufst du die funktion vermutlich auf, anstelle sie zu übergeben.

Sehr schön - endlich kommen die Punkte, wenn die Animation fertig ist.

nicht sicher, nur in den meisten fällen. um sicher zu gehen, musst du die callbackfunktion der animation nutzen.

Dazu kommen sie noch brav nacheinander und nicht gleichzeitig, was schöner aussieht

wenn dir das gefällt, nutze diese funktion, aber im callback.

[cysign]

http://spili.aeroconcept.de/backup/2...Detailansicht/So siehts aus. Die oberen Punkte bei Deutschland funktionieren schon (bei den anderen gibts noch nichts zu sehn, weil die alle in der Detailansicht die selben koordinaten haben...).
Ich hab als Callback-Versuch an die Animation zum Öffnen der Detailansicht nach der Zeitangabe ", alert("test")" angehangen, was aber ausgegeben wurde, bevor die Animation überhaupt erst los ging.
Vielleicht ist es nicht ganz so sauber...aber wenn ich dem Delay den Zeitwert gebe, den die Animation zum Öffnen der Detailansicht hat, dann sollte es etwa passen

[tsseh]

Ich hab als Callback-Versuch an die Animation zum Öffnen der Detailansicht nach der Zeitangabe ", alert("test")" angehangen, was aber ausgegeben wurde, bevor die Animation überhaupt erst los ging.

weil das ein aufruf der funktion alert ist.

[cysign]

Wenn ich in der Detailansicht auf die roten Punkte klicke, ist manchmal das Hintergrundbild (die Karte) markiert (blau überzogen). Kann ich das irgendwie vermeiden? Ich hab keine Ahnung, nach was ich da suchen muss... bei Selection kommt immer Datenbank-Zeugs etc. raus.

weil das ein aufruf der funktion alert ist.

Alert reagiert anders als andere Funktionen?

[tsseh]

Wenn ich in der Detailansicht auf die roten Punkte klicke, ist manchmal das Hintergrundbild (die Karte) markiert (blau überzogen). Kann ich das irgendwie vermeiden? Ich hab keine Ahnung, nach was ich da suchen muss... bei Selection kommt immer Datenbank-Zeugs etc. raus.

selection range collapse collapseToStart - Google-Suche

Alert reagiert anders als andere Funktionen?

nein,
alert("xxx");
ist ein funktionsaufruf, genau wie
(function ()
{
alert("xxx");
})();
einer ist. allerdings ist
function ()
{
alert("xxx");
}
bzw.
var func = function ()
{
alert("xxx");
};
oder
function func()
{
alert("xxx");
};

eine variablen-definition. im 1. fall die einer temporären, im 2. und 3. fall die der variablen func.
alle 3 variablen kannst du als callback übergeben.

[cysign]

Hmmm...das wär ne Lösung. Werd ich mir mal ansehn, aber erstmal bleib ich bei meiner delay-Lösung.

Ich bin grad an dem Punkt angekommen, wo ich bzgl. Mauskoordinaten und den Koordinaten eines Objekts Probleme habe.
Und zwar möchte ich die Mauskoordinaten prozentual auf der Karte haben. Sprich: Die Maus ist bei x: 17% und y: 83% über der Weltkarte.
Im IE8 und im FF klappt das auch... aer im IE7 bekommt meine Seite Scrollbalken und er ließt die Koordinaten der Div-Box "worldmap" nicht richtig aus, somit ist die Maus beim Koordinatenursprung links oben in der Ecke der Seite bei 0% auf der "worldmap"

jQuery(document).ready(function(){
   $(document).mousemove(function(e){
      var weltkartenx = document.getElementById("worldmap").offsetLeft;
      var weltkarteny = document.getElementById("worldmap").offsetTop;
      var mausx = e.pageX - weltkartenx;
      var mausy = e.pageY - weltkarteny;
      var zielweite = document.getElementById("worldmap").offsetWidth;
      var zielhoehe = document.getElementById("worldmap").offsetHeight;
      var prozx = (mausx / zielweite *100);
      var prozy = (mausy / zielhoehe *100);
      $('#folger').html(mausx + "|" + mausy + "<br />" + (Math.round(prozx)) + " | " + (Math.round(prozy)));
   }); 
})

Ich bin grad schon ziemlich lange auf der Suche nach einer Lösung... Hat vielleicht jemand ne Idee, wie ich das doch im IE7 richtig lösen kann?
http://spili.aeroconcept.de/backup/2...AuchProzentual
Der IE7 kann scheinbar hiermit nicht umgehn:

      var weltkartenx = document.getElementById("worldmap").offsetLeft;
      var weltkarteny = document.getElementById("worldmap").offsetTop;

[tsseh]

Ich bin grad schon ziemlich lange auf der Suche nach einer Lösung... Hat vielleicht jemand ne Idee, wie ich das doch im IE7 richtig lösen kann?

http://de.selfhtml.org/javascript/ob...htm#client_x_y
wobei zu beachten ist, dass sich das auf den anzeigebereichs bezieht.

var body = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null; 
var y =  (typeof event.pageY != "undefined") ? event.pageY : event.clientY + body.scrollTop - body.clientTop;

Der IE7 kann scheinbar hiermit nicht umgehn:

      var weltkartenx = document.getElementById("worldmap").offsetLeft;
      var weltkarteny = document.getElementById("worldmap").offsetTop;

doch, allerdings solltest du hier noch alle offsetParent-objekte berücksichtigen, um das sauber zu lösen

[cysign]

Ich blick da irgendwie noch nicht so ganz durch. offsetParent-Objekte sind dann die umliegenden DIV-Boxen und der Body? Das hieße, ich müsste mich irgendwie durchhangeln zur Div "worldmap", um ihre Position auszulesen?

var body = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null; 
var y =  (typeof event.pageY != "undefined") ? event.pageY : event.clientY + body.scrollTop - body.clientTop;

sagt mich leider auch nicht so viel. Was ist denn:
CompatMode
CSS1Compat
typeof event.pageY
Unterschied zwischen body.clientTop und body.scrollTop?

[Junkee[]]

http://uselessscripting.de/posts/js/...-position.html