Bytte et bilde i IE6

Fant en metode som i hvert fall fungerer i IE7:

Sletter PNG-bildet med
img = document.getElementById("venstreforheng");
img.parentNode.removeChild(img);

Pakker inn GIF'en i div med style=display:none.
Gjør GIF'en synlig ved å fjerne stilattributtet:
container = document.getElementById("venstreforheng-container");
container.removeAttribute("style");

Tester i morgen om det også fungerer i IE6.

Bare en lille kommentar: Du behøver ikke pakke gif'en ind i en div med style="display:none", du kan bare sætte stylen direkte på billedet og få samme resultat.

Det burde i øvrigt fungere, da det er helt korrekt DOM, du bruger.

Korrekt DOM bærer ikke nødvendigvis langt i IE6 :(

Men noe kunne tyde på at jeg fikk til DOM, jeg får byttet ut gardinen til venstre med en GIF.

Derimot får jeg ikke opp GIF-versjonen av kappen i toppen. Den har naturligvis noen finurligheter med "background-repeat:repeat-x;", mon tro det er det som ikke fungerer i IE6. (Den gamle versjonen på http://www.hsjonleik.fo/ brukte én kappe-GIF, uten repetisjon.)

Ja, jeg kan sette stiler rett på bildet. Men:
1) Jeg hadde problemer med å SETTE en style, derimot kunne jeg fint fjerne en.
2) DOM (i sine mere primitive former) håndterer style-attributtet som en enhet. Container-DIV'en er en måte å isolere av/på knappen i et annet style-attributt enn det som brukes når bildet faktisk vises.

Jeg skal visst omdirigere poengene til problemet med å få vist topp-kappen.

Hvordan prøver du at sætte style?

(Jeg SETTER ingen stil, jeg sletter en stil som gjør elementet usynlig.)

Men - nå har jeg isolert problemet mitt i http://www.hsjonleik.fo/test/kappe.test.htm. Der ser jeg en kappe i Firefox og Opera, men ikke i IE6.

Ser ut til at jeg må lage meg en bred kappe-GIF, og bruke overflow:hidden på den...

Jo, men du sagde, at du havde problemer med at sætte en style. (Dit punkt 1)

Jeg prøvde noe i retning av
c.CSSStyleDeclaration = "margin: 0px; padding: 0px; display: block;";

som jeg fant bortkommentert i en gammel side. Men hvis jeg likevel skal deklarere hele stilattributtet som en enhet, så kan jeg jo opprette et generelt attriibutt som heter 'style'. Noe i stil av

c = createAttribute("style");
c.value = "margin: 0px; padding: 0px; display: block;";

Problemet med style er netop, at der ikke er nogen særlig gyldig DOM-metode til at deklarere den med. Du må derfor ty til en god gammeldags:
element.style.margin="0";
element.style.padding="0";
element.style.display="block";

<ole>

janegil >> Du tænker nok på:
    ELEMENT.style.cssText = "width:200px;height:100px;background-color:yellow;color:red";

- men selvom den vist er nævnt i W3C's CSS IDL, så tror jeg ikke, den bør være valid, brugt på dén måde. Både IE og FF understøtter den dog - men jeg er ikke sikker på, om Opera er kommet med. For et årstid siden, da jeg selv kunne have brugt noget lignende, var den ikke understøttet i Opera.

Ellers er der den metode, jeg viser sidst i denne artikel:
    http://www.eksperten.dk/artikler/227

Du skal bare huske, at du så skal bruge 'CamelCase' på de forskellige properties ... ikke 'background-color', men 'backgroundColor'  ;o)

/mvh
</bole>

Hvis du vil undgå 'CamelCase' og tillade en 'sjusket' CSS-streng, kan du kikke på dette lidt udvidede eksempel:

<script type="text/JavaScript">
function setStyles(oElm, sStyles) {
    var aCss = sStyles.split(/\s?;\s?/),
    css = oElm.style, a;
    for (var i=0,j=aCss.length; i<j; i++) {
        a = aCss[i].split(/\s?:\s?/);
        a[0] = a[0].replace(/(-.)/, function($1){return $1.charAt(1).toUpperCase()});
        css[a[0]] = a[1];
    }
}
function foo() {
    var oMyElm = document.getElementById("gnu");
    setStyles(oMyElm, "width: 200px;height :100px;background-color:yellow;color:blue; border : 2px solid #f00 ; padding-left:20px");
}
</script>

<p><button onclick="foo()">TEST</button></p>

<div id="gnu">Dette er et div, du kan style med knappen ovenfor</div>

Nå har jeg en versjon som fungerer nogenlunde på http://www.hsjonleik.fo/program.test.htm?IE6

Sammendrag:

Standardversjonen bruker PNG med 8-bits alfakanal og elementer med "position:fixed". Sånt fungerer ikke i IE6.

Så koden inneholder 'sleeper cells' med kode tilpasset IE6 i DIV'er med "display:none".

Nåt Javascript detekterer IE6 (de som bruker IE6 har nok Javascript aktivert) sletter skriptet standardelementene, og vekker 'sleeper cells' ved å slette sstyle-attributtet fra de omliggende DIV'er.