PNG transparency -> display:block

Hi,
habe folgendes Problem:
Ich möchte PNG bilder anzeigen lassen, deren leere stellen transparent werden. Das ganze für den IE 6.0 da es hier ja noch nicht funzt so wie in mozilla und IE 7.0. Den Script dafür habe ich. Jedoch besteht folgendes Problem:
Die Bilder befinden sich auf einem Layer, welcher mit display:none versteckt ist und per display:block wieder sichtbar werden. Nur funktioniert das leider nicht. Auf einem Layer ohne die display funktion werden die png bilder angezeigt nur bei einem layer mit der display funktion wird kein einziges png bild angezeigt.
Fällt jmd spontan ne Lösung ein?
Anmerkung: Mir ist sehr wohl bekannt das PNG bilder mit transparency nicht als hintergrund bilder funktionieren, da dort die transparency nicht dargestellt wird.
Zusatz: Eher gesagt liegt das Problem daran dass der Layer zuerst unsichtbar ist und dass somit die Bilder nicht geladen werden.

codebeispiele?
ich blende auf dieselbe weise halbtransparente pngs ein .. geladen werden die selbst bei display:none. ich tippe einfach mal auf falsches js bzw. css (Ja, man kann das auch css-only machen!)

ich hab nen script benutzt:

var strGif = "transparentpixel.gif"
var strFilter = "progidXImageTransform.Microsoft.AlphaImageLoader"
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i
{
var img = document.images
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
if (img.useMap)
{
strAddMap = "
+ "height:" + img.height + "px;width:" + img.width +"\" "
+ "src=\"" + strGif + "\" usemap=\"" + img.useMap
+ "\" border=\"" + img.border + "\">"
}
var strNewHTML = "
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:" + strFilter
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">"
if (img.useMap) strNewHTML += strAddMap
img.outerHTML = strNewHTML
i = i-1
}
}
for(i=0; i < document.forms.length; i++) findImgInputs(document.forms(i))
}
function findImgInputs(oParent)
{
var oChildren = oParent.children
if (oChildren)
{
for (var i=0; i < oChildren.length; i++ )
{
var oChild = oChildren(i)
if ((oChild.type == 'image') && (oChild.src))
{
var origSrc = oChild.src
oChild.src = strGif
oChild.style.filter = strFilter + "(src='" + origSrc + "')"
}
findImgInputs(oChild)
}
}
}

/table>
Angezeigt wird das ganze durch:
bla
Das Problem liegt dabei dass die Bilder nicht wirklich geladen werden weil diese im Hintergrund ja sind.
Hast du die Bilder irgendwie vorgeladen? bzw kannst mir da en beispiel geben?

aso .. nun hab ich dich verstanden..
du willst png-transparenz im ie6 ..
für mein browsergame setz ich ie7 vorraus .. ganz einfache kiste.
aber hier mal nen bischen hilfe zu dem js:
das geht alle BILDER durch und ersetzt sie durch ein transparentes und klatscht dann mit ner maske das urprüngliche drauf..
nun willst du das ich bei hintergrundbildern haben.
benutz denselben hack.
lauf alle tags durch, such nach einem style-attribut "background-image" (oder background-attribut.. was aber unschön ist) und erzetz das durch das "transparentpixel.gif". dann fügst du in DEMSELBEN style noch ein

filter:progidXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='scale')

hinzu. ich geh mal davon aus, das schon eine feste höhe/breite vergeben ist .. ansonsten musst du die auch noch eben setzen.
natürlich sollte das js wie das andere oben nur beim ie zum einsatz kommen .. im ff wird dir das alles zerschiessen ..
hth

hmm.. ne ich wollte das nicht bei hintergrundbildern.
das problem ist nur dass die bilder nicht angezeigt werden wenn sie von anfang an im display: none modus sind und dann per js auf display: block umgeschalten werden. die bilder welche an manchen stellen transparent angezeigt werden sollen werden dann einfach gar nicht angezeigt. alle anderen bilder in diesem layer werden ohne probleme angezeigt.

ok ich hab ne lösung gefunden:
anstatt: "display: block" einfach "visibility: visible" verwenden, dann klappt alles einwandfrei

dir ist der unterschied zwischen beiden bewusst?
display:none "entfert" das Element beim rendern
visibility:none(?) zeigt statt dem Element eine leere Fläche, reserviert aber Platz
ist aber auch nicht bei allen browsern so umgesetzt .. hab irgendwo mal ne liste gesehen ..
edit: bei absolute positionierten Elementen fällt der "unterschied" natürlich weg, weil die über das gerenderte drüberklatschen..

bei visibility:hidden ist das element noch da, nur nicht sichtbar. das heisst, dass Links und Text darunter nicht mehr klick- bzw selektierbar sind.
das problem hatte ich bei meiner windowklasse.