24 svar · 1 266 visningar · startad av learn
Jag använder denna metod 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!
Ingen anning, syns det bara ett [x] i IE, eller? DÅ kanske de blir fel sökväg, vad vet jag.. hehe. :)
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...
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! :)
Du har inga bilder eller sånt som vi kan få undersöka?
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?
Hoppas att du är medveten om att du måste spara bilden i PNG-24-format om du ska använda genomskinlighet/transparency. ;)
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!
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]
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!
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
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
Ok, tack nitro! Ska kika på det lite senare, återkommer ;)
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
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"!
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".
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...
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.
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.
