• 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

Kann ich durch Codeoptimierung später die Performance im IE verbessern? Vor allem das Scalieren der Detailansichten bereitet mir Sorgen... Aber ich muss dazu sagen, dass der Rechner hier auch von 10000BC ist :D
 
cysign schrieb:
Kann ich durch Codeoptimierung später die Performance im IE verbessern?
Zum Vergrößern anklicken....
ja natürlich, das sagt duch schon der name. die frage ist, ob man es überhaupt merkt.
du musst halt das optimieren, was die meiste zeit benötigt(in summe selbstverständlich) - wenn das überhaupt in deiner hand liegt.
 
hesst schrieb:
ja natürlich, das sagt duch schon der name. die frage ist, ob man es überhaupt merkt.
du musst halt das optimieren, was die meiste zeit benötigt(in summe selbstverständlich) - wenn das überhaupt in deiner hand liegt.
Zum Vergrößern anklicken....

Das meine ich eben. Dass Optimierung immer was bringt, ist mir schon klar.
Aber ich vermute mal, dass dieses Skalieren einfach mehr Rechenpower braucht als die olle Kiste hergibt.
 
Nachdem meine "Hitdetection" nun funktioniert, lief gestern auch zunächst das ANzeigen ohne Probleme.
Nach etlicher Weiterfrickelei jedoch ist es so, dass meine PNG24-Bildchen mit dem roten Punkt in der Detailansicht nen schwarzen Hintergrund bekommen.
Das Problem tritt nur im IE8 auf.
Im per IT-Tab emulierten IE in Firefox (keine Ahnung, welche Version das ist) ist es inzwischen sogar so, dass meine DOT-Bildchen gar nicht mehr angezeigt werden :(
http://spili.aeroconcept.de/backup/20100720_01_dotbgprob/
Code: 
for (var i = 0; i < ddots.length; i++){
						document.getElementById(ddots[i]).style.zIndex=7;
						document.getElementById(ddots[i]).style.opacity=0;
						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";
						$("#"+ddots[i]).animate({
										opacity: 1.0,
									  }, timeding );
						}
Code: 
.dots{
height: 5px;
width: 5px;
position: absolute;
color: #000;
z-index: 3;
}

.dots img{
width: 100%;
height: 100%;
}

.dotsdetail{
height: 10px;
width: 10px;
position: absolute;
color: #000;
background-color: transparent;
}

.dotsdetail img{
width: 100%;
height: 100%;
}

Nach dem Schließen der Detailansicht bleibt der schwarze Hintergrund:
Code: 
function detailweg(){
	$("#"+old).animate({
		width: oldxsize,
		height: oldysize,
		marginTop: oldy,
		marginLeft: oldx,
		opacity: 0,
		borderWidth: "1px"
	  }, 10 );
	  document.getElementById("infoboxtext").innerHTML=("uncheck");
	  document.getElementById(old).innerHTML=("");
				  
	for (var i = 0; i < ddots.length; i++){
		document.getElementById(ddots[i]).style.zIndex=3;
		/*document.getElementById(ddots[i]).style.marginLeft=(ddots[i]).x;*/
		var temp = ddots[i];
		document.getElementById(ddots[i]).className="dots";
		document.getElementById(temp).style.marginLeft = document.getElementById(temp).x+"px";
		document.getElementById(temp).style.marginTop = document.getElementById(temp).y+"px";
		}
		ddots.splice(0, ddots.length);
}

D.h. ich muss eigentlich 'nur suchen', was ich beim Öffnen der Detailansicht verändere, aber hinterher nicht rückgängig mache...aber ich komm da irgendwie nicht drauf :(
 
Ah, okay. Ich habs mal rausgenommen. Und zum rumhantieren hab ich das ganze mal ge-7-zippt:
http://spili.aeroconcept.de/backup/20100720_01_dotbgprob.7z
Sollte nach dem Entpacken auch offline funktionieren.

Edit: Ah, nachdem ich das Kommata entfernt habe, gehts mit IE-Tab in FF wieder. Vermutlich wird er auch den IE7 emulieren. Aber das Problem mit dem schwarzen Rahmen bleibt...
 
Zuletzt bearbeitet:
der ie hat probleme mit png-transparenz und opacity.
entweder nimmst du gifs, oder verzichtest auf das einfaden bzw. nutzt einen anderen effekjt
 
Verdammt. Ich hatte es befürchtet :(
Ich hab schon mit dem jQuery-Dalay-Effekt rumgespielt, aber den bekomm ich an der Stelle nicht zum Laufen.
Die Sache ist halt, dass die roten Punkte in der Detailansicht erst erscheinen sollen, wenn die Detailkarte eingefadet ist.
Ich hab allerdings auch kein jQuery-Delay-Beispiel gefunden, was ich mir umstricken könnte.
Im Endeffekt brauch ich ein Delay, mit dem ich die CSS-Werte verändere und einfach die Visibility nach xxx ms auf sichtbar stelle, dann brauch ich an dieser Stelle das halbtransparente PNG nicht noch mit Opacity zu manipulieren, was hoffentlich dann den Fehler vermeidet.

Wir würde den das Equivalent zu
Code: 
$("objektname").animate({opacity: 1.0}, zeit );
mit delay und statt opacity visibility aussehn?


Ah, okay, hab n Beispiel für Delay mit CSS gefunden:
Code: 
// Change background color of all anchors after 1 second:
$('a').delay(1000, function(){
    $(this).css({
        background: 'red'
    });
});
 
Zuletzt bearbeitet:
cysign schrieb:
Die Sache ist halt, dass die roten Punkte in der Detailansicht erst erscheinen sollen, wenn die Detailkarte eingefadet ist.
Zum Vergrößern anklicken....
dann mache das doch dort, wo es hingehört, dort wo sicher ist, dass die detailansicht fertig ist, in der callbackfunktion der animate-funktion der detailansicht.
 
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).
 
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:
Code: 
$.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/jquery-delay-plugin/.

Dazu habe ich meinen code folgendermaßen verändert:
Code: 
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'
                    });
                });
}
 
cysign schrieb:
Schade, ich dachte, die Callback-Funktion wird ausgeführt, wenn die Animation fertig ist
Zum Vergrößern anklicken....
wird sie auch

cysign schrieb:
...aber leider bekomme ich ein alert("test") direkt ausgegeben.
Zum Vergrößern anklicken....
dann rufst du die funktion vermutlich auf, anstelle sie zu übergeben.

cysign schrieb:
Sehr schön - endlich kommen die Punkte, wenn die Animation fertig ist.
Zum Vergrößern anklicken....
nicht sicher, nur in den meisten fällen. um sicher zu gehen, musst du die callbackfunktion der animation nutzen.

cysign schrieb:
Dazu kommen sie noch brav nacheinander und nicht gleichzeitig, was schöner aussieht :)
Zum Vergrößern anklicken....
wenn dir das gefällt, nutze diese funktion, aber im callback.
 
http://spili.aeroconcept.de/backup/20100721_01_delayDOTsDetailansicht/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 ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben