image map über xml festlegen und animieren

[tsseh]

einfach old.index

[cysign]

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

[tsseh]

Kann ich durch Codeoptimierung später die Performance im IE verbessern?

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.

[Junkee[]]

Codeoptimierung im Sinne von weniger machen verbessert die Performance.

[cysign]

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.

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.

[cysign]

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/2..._01_dotbgprob/

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

.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:

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

[tsseh]

hier

						$("#"+ddots[i]).animate({
										opacity: 1.0,
									  }, timeding );
						}

ist schon mal ein komma zuviel

[cysign]

Danke für den Hinweis. Aber ändert leider nichts am Problem

[tsseh]

Danke für den Hinweis. Aber ändert leider nichts am Problem

aber ich komme mit dem ie7 sonst nicht weiter.

[cysign]

Ah, okay. Ich habs mal rausgenommen. Und zum rumhantieren hab ich das ganze mal ge-7-zippt:
http://spili.aeroconcept.de/backup/2...1_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...

[tsseh]

der ie hat probleme mit png-transparenz und opacity.
entweder nimmst du gifs, oder verzichtest auf das einfaden bzw. nutzt einen anderen effekjt

[cysign]

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

$("objektname").animate({opacity: 1.0}, zeit );

mit delay und statt opacity visibility aussehn?


Ah, okay, hab n Beispiel für Delay mit CSS gefunden:

// Change background color of all anchors after 1 second:
$('a').delay(1000, function(){
    $(this).css({
        background: 'red'
    });
});

[tsseh]

Die Sache ist halt, dass die roten Punkte in der Detailansicht erst erscheinen sollen, wenn die Detailkarte eingefadet ist.

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.

[kkapsner]

@hesst: man kann im IE schon PNG mit Opacity verwenden - ist nur extrem umständlich: http://kkjs.kkapsner.de/tests/IE-filter+png-lsg.html

[tsseh]

@hesst: man kann im IE schon PNG mit Opacity verwenden - ist nur extrem umständlich: http://kkjs.kkapsner.de/tests/IE-filter+png-lsg.html

natürlich, habe ich auch nie behauptet, aber wesentlich einfacher ist es halt einfach gif-bilder zu nehmen, bzw. einfach das einfaden durch aufsliden auszutauschen, oder in seinem fall einfach die grafiken in der cb-funktion sichtbar zu schalten.