---
title: "PNG i IE"
type: "forum-thread"
url: "https://www.webforum.nu/amne/design-grafik/141173-png-i-ie"
topic: "Design & grafik"
topic_url: "https://www.webforum.nu/amne/design-grafik"
author: "learn"
published: "2006-01-19T21:41:49.000Z"
updated: "2006-03-06T16:07:57.000Z"
replies: 24
views: 1318
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/design-grafik/141173-png-i-ie"
---

# PNG i IE

_Sida 1 av 2._

## #1 — learn, 2006-01-19T21:41Z

Jag använder [denna metod](http://koivi.com/ie-png-transparency/) för att mina PNG-bilder ska bli bra i IE(\<-hata). Men så fort jag byter ut den bild som följer med i exemplet mot en av mina egna PNG-bilder så funkar det inte, bilden visas då helt enkelt inte längre... Ngn som kan förstå sig på varför..?? Tack!

Permalänk: https://www.webforum.nu/p/141173

## #2 — Fredde Mannen, 2006-01-19T21:43Z

Ingen anning, syns det bara ett \[x\] i IE, eller? DÅ kanske de blir fel sökväg, vad vet jag.. hehe. :)

Permalänk: https://www.webforum.nu/p/1751684

## #3 — learn, 2006-01-19T21:51Z

Nepp, sökvägen är korrekt.. Verkar som att det skulle va ngt fel på själva bilden, kan det vara så..?

Bilden i fråga funkar dock att visa i "vanliga" fall...

Permalänk: https://www.webforum.nu/p/1751694

## #4 — learn, 2006-01-20T12:24Z

Vi tar det från början,

För det första så måste jag bara uttala mitt hat gentemot Internet Explorer, det är ju inte direkt första ggn de fäller krokben för mig.   x( 

Nu är det så att jag väldigt gärna vill använda en PNG-bild med transparens! Finns det något säkert sätt att få den att fungera i IE? Eller bör man undvika denna typ av bild? Kan någon förklara för mig både hurvida det är "säkert" eller inte, samt hur jag gör rent programmeringsmässigt. Kanske något skript-tips?

Tack, så oerhört mkt, i förväg!   :)

Permalänk: https://www.webforum.nu/p/1751918

## #5 — petla81406, 2006-01-20T22:49Z

Du har inga bilder eller sånt som vi kan få undersöka?

Permalänk: https://www.webforum.nu/p/1752177

## #6 — learn, 2006-01-20T23:43Z

Det var inte bilden det var fel på... Om bilderna ligger i exakt samma mapp som filen så funkar det... Men nu vill jag ju ha bildera i en annan mapp! Som sagt:

> **learn skrev:**
>
> Nu är det så att jag väldigt gärna vill använda en PNG-bild med transparens! Finns det något säkert sätt att få den att fungera i IE? Eller bör man undvika denna typ av bild? Kan någon förklara för mig både hurvida det är "säkert" eller inte, samt hur jag gör rent programmeringsmässigt. Kanske något skript-tips?

Permalänk: https://www.webforum.nu/p/1752186

## #7 — pimpN, 2006-01-20T23:54Z

Hoppas att du är medveten om att du måste spara bilden i PNG-24-format om du ska använda genomskinlighet/transparency. ;)

Permalänk: https://www.webforum.nu/p/1752188

## #8 — learn, 2006-01-22T20:06Z

> **pimpN skrev:**
>
> Hoppas att du är medveten om att du måste spara bilden i PNG-24-format om du ska använda genomskinlighet/transparency. ;)

Jäpp :)

Snälla, ngn ge mig ett skript som funkar!

Permalänk: https://www.webforum.nu/p/1752818

## #9 — Travoni, 2006-01-23T07:11Z

Skapa en .js-fil enligt röd kod. Lägg in blå kod på sidor där du vill använda transparenta png-filer.

```
[blue]<!--[if gte IE 5.5000]>
	<![if lt IE 7]>
		<script type="text/javascript" src="pngfix.js"></script>
	<![endif]>
<![endif]-->[/blue]

[red][b]//pngfix.js[/B]
function correctPNG() 
   {
   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 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle		
		 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;
		 i = i-1;
	     }
      }
   };
window.attachEvent("onload", correctPNG);

[/RED]
```

Permalänk: https://www.webforum.nu/p/1752931

## #10 — learn, 2006-01-23T12:16Z

Det funkade ju..! Tack!

Men hur pass säkert är detta då, ärligt talat? Någon som har erfarenhet av detta, kan jag lite på att koden alltid funkar??

Koden kommer alltid köras (i IE) då bilden alltid ska synas, blir sidan betydligt mer segladdad??

Tack igen!

Permalänk: https://www.webforum.nu/p/1753005

## #11 — pimpN, 2006-01-23T14:06Z

> **learn skrev:**
>
> Det funkade ju..! Tack!
> 
> Men hur pass säkert är detta då, ärligt talat? Någon som har erfarenhet av detta, kan jag lite på att koden alltid funkar??
> 
> Koden kommer alltid köras (i IE) då bilden alltid ska synas, blir sidan betydligt mer segladdad??
> 
> Tack igen!

Eftersom det är ett javascript kommer det inte att fungera då dessa är inaktiverade. Du kan köra med detta:

**1\. Skapa en Internet Explorer-specifik CSS-fil vid namn** url(style.css) all

@import url(style.css);

.foo {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bar.png', sizingMethod='scale');
}

**2\. Lägg till följande i din vanliga CSS-fil som har namnet** style.css

.foo { background: url(bar.png) }

// Oliver Olofsson

Permalänk: https://www.webforum.nu/p/1753042

## #12 — pimpN, 2006-01-23T14:12Z

> **learn skrev:**
>
> Det funkade ju..! Tack!
> 
> Men hur pass säkert är detta då, ärligt talat? Någon som har erfarenhet av detta, kan jag lite på att koden alltid funkar??
> 
> Koden kommer alltid köras (i IE) då bilden alltid ska synas, blir sidan betydligt mer segladdad??
> 
> Tack igen!

Eftersom det är ett javascript kommer det inte att fungera då dessa är inaktiverade. Du kan köra med detta:

**1\. Skapa en Internet Explorer-specifik CSS-fil vid namn** url(style.css) all

```
[red]@import url(style.css);

.foo {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bar.png', sizingMethod='scale');
}[/red]
```

**2\. Lägg till följande i din vanliga CSS-fil som har namnet** style.css

```
[red].foo { background: url(bar.png) }[/red]
```

***Edit:* OBS! Fråga mig inte varför src='bar.png' fuckar sig i den första kodsnutten ;/**

// Oliver Olofsson

Permalänk: https://www.webforum.nu/p/1753045

## #13 — nitro2k01, 2006-01-23T14:13Z

[Detta](http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html) är ananrs i princip den enklaste och mest transparenta ( ;) ) lösning som jag känner till. Låter dig helt enkelt länka till png-filerna som vanligt, och byta bild med hjälpa av src-attributet, och det funkar ändå.

Permalänk: https://www.webforum.nu/p/1753046

## #14 — learn, 2006-01-23T14:47Z

Ok, tack nitro! Ska kika på det lite senare, återkommer ;)

Permalänk: https://www.webforum.nu/p/1753060

## #15 — pimpN, 2006-01-23T15:47Z

> **learn skrev:**
>
> Ok, tack nitro! Ska kika på det lite senare, återkommer ;)

möhö.. jag har samma metod, men med en enklare förklaring ;)
 :OO

Permalänk: https://www.webforum.nu/p/1753073

## #16 — nitro2k01, 2006-01-23T16:01Z

> **pimpN skrev:**
>
> möhö.. jag har samma metod, men med en enklare förklaring ;)
>  :OO

Förklara gärna vad du menar med "samma metod" och "enklare förklaring"!

Permalänk: https://www.webforum.nu/p/1753077

## #17 — pimpN, 2006-01-23T16:06Z

> Förklara gärna vad du menar med "samma metod" och "enklare förklaring"!

"filter:progid:DXImageTransform.Microsoft.AlphaIm.. osv" samt "några korta, överskådliga rader".

Permalänk: https://www.webforum.nu/p/1753083

## #18 — nitro2k01, 2006-01-24T14:34Z

Jag tycker annars att webfx's metod är enklare. Scrolla ner på sidan, så ser du att det finns färdig kod som man kan klistra in på sin sida, som gör att man kan använda png-bilder helt som vanligt, typ \<img src="bild.png" /\>
Din metod sabbar ju för övrigt för alla andra webbläsare, som redan har stöd inbyggt...

Permalänk: https://www.webforum.nu/p/1753416

## #19 — pimpN, 2006-01-24T14:57Z

> **nitro2k01 skrev:**
>
> Din metod sabbar ju för övrigt för alla andra webbläsare, som redan har stöd inbyggt...

Absolut inte. Kolla lite närmare på koden.

Permalänk: https://www.webforum.nu/p/1753430

## #20 — nitro2k01, 2006-01-24T15:26Z

> **pimpN skrev:**
>
> Absolut inte. Kolla lite närmare på koden.

Ok, du har rätt, men däremot antar jag att man måste ha en div istället för en img, ange storleken manuellt på varje bild samt lägga till varje bild manuellt i CSS. Webfx's kod liksom bara fungerar rakt av.

Permalänk: https://www.webforum.nu/p/1753444

---

Tråden på webben: https://www.webforum.nu/amne/design-grafik/141173-png-i-ie  
Nästa sida: https://www.webforum.nu/amne/design-grafik/141173-png-i-ie/page2.md