Position von Bildern über document.images

[Thomas]

Hallo,

ich fang gleich mal mit meinem Problem an:
Ich verwende ein Javascript um PNG Grafiken für den IE6 transparent zu machen.

Das geht auch eigentlich ohne große Probleme. Wenn ich allerdings in meinem JS per for-Schleife alle Bilder durch gehe, und jedes in einen <span> Block einschieße um
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bild.png', sizingMethod='scale');"
anzuwenden, stehe ich vor dem Problem, dass die Bilder nicht mehr an der richtigen Position sind.

Nun zur Frage:

Geht es irgendwie, dass ich in meinem JS auf den CSS-Eintrag margin komme und den dem <span> Tag zuordnen kann?

Gruss Thomas

Bis jetzt sieht das script so aus:

  
for(var i=0; i<document.images.length; i++)  
{  
  var img = document.images[i];  
  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;  
     var strNewHTML = "<span " + imgID + imgClass + imgTitle  
     + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"  
     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"  
     + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";  
     img.outerHTML = strNewHTML;  
  }  
}  

[Fay]

Hallo Thomas,

Geht es irgendwie, dass ich in meinem JS auf den CSS-Eintrag margin komme und den dem <span> Tag zuordnen kann?

Du kannst über das http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objekt auf die css-Eigenschaften eines Elements zugreifen.

Somit kannst du beim Definieren des span-Elements gleich noch die margin-Eigenschaften mitgeben.

Gruß,

Fay

[Thomas]

Danke für deine Antwort. Komme aber immer noch nicht richtig weiter. Wie kann ich dem span Element jetzt die Werte mitgeben? Ich hab mal was gemacht. Aber das funktioniert immer noch nicht. Keine Ahnung woran das liegen könnte. Irgendwelche Vorschläge??

Hier nochmal das (verbesserte?) Skript...

  
for(var i=0; i<document.images.length; i++)  
{  
   var img = document.images[i];  
   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;  
      var imgMarginTop = img.style.marginTop;  
      var imgMarginRight = img.style.marginRight;  
      var imgMarginBottom = img.style.marginBottom;  
      var imgMarginLeft = img.style.marginLeft;  
      var strNewHTML = "<span " + imgID + imgClass + imgTitle  
      + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"  
      + " margin:" + imgMarginTop + "px " + imgMarginRight + "px " + imgMarginBottom + "px " + imgMarginLeft + "px;"  
      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"  
      + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";  
      img.outerHTML = strNewHTML;  
      i = i -1;  
   }  
}