"Rune Jensen" <rune.jensen@villabynet.dk> wrote in message
news:457eee1e$0$2666$456a7185@news.cirque.dk...
> "Morten P. Andersen" wrote in message...
>
>> Kan man fortæller/snyde IE så den godt kan få PNG-billeder
> gennemsigtige?
>
> Jeg tror det er maks. en måned siden, der blev svaret på lign. PNG kan
> godt gøres gennemsigtige, men kun som GIFfer opfatter gennemsigtighed.
> Det var vist konklusionen. Selvfølgelig kan man bruge javascript, det
> ville jeg dog ikke. Ellers - så prøv at søge tilbage her i gruppen, hvor
> diskussionen burde befinde sig. Alternativt kan det være en af guruerne
> kommer frem igen
>
> MVH
> Rune Jensen
>
Jeg har nu et stykke tid brugt en metode til at vise PNG'er i IE og ikke kun
vs. 7.
"Logoet" her er en PNG med skygge:
http://horsensopenair.dk/
Det samme gælder den lille "flip" nederst i højre hjørne.
Gør siden mindre og se hvad der sker, når den rammer ind over andre
elementer...
Se også
http://eyecatch.dk/?r=0
Skift mellem kategorierne. Logoet nederst til venstre er en gennemsigtig
PNG.
Løsning:
Lav en gennemsigtig GIF på 1x1 px og gem den i en webfolder, lad os som
eksempel sige i roden "code". Kald den "blank.gif"
Lave en fil med nedenstående indhold:
-------------------------------------------------
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<public:attach event="onbeforeprint" onevent="beforePrint()" for="window"/>
<public:attach event="onafterprint" onevent="afterPrint()" for="window"/>
<script>
/*
* PNG Behavior
*
* This script was created by Erik Arvidsson
(
http://webfx.eae.net/contact.html#erik)
* for WebFX (
http://webfx.eae.net)
* Copyright 2002-2004
*
* For usage see license at
http://webfx.eae.net/license.html
*
* Version: 1.02
* Created: 2001-??-?? First working version
* Updated: 2002-03-28 Fixed issue when starting with a non png image and
* switching between non png images
* 2003-01-06 Fixed RegExp to correctly work with IE 5.0x
* 2004-05-09 When printing revert to original
*
*/
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";
var realSrc;
var blankSrc = "/code/blank.gif";
var isPrinting = false;
if (supported) fixImage();
function propertyChanged() {
if (!supported || isPrinting) return;
var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
function fixImage() {
// get src
var src = element.src;
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}
// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
function beforePrint() {
isPrinting = true;
element.src = realSrc;
element.runtimeStyle.filter = "";
realSrc = null;
}
function afterPrint() {
isPrinting = false;
fixImage();
}
</script>
</public:component>
-------------------------------------------------
Gem filen i "code" og kald den "pngbehavior.htc".
Den skal have endelsen "htc"
I din CSS fil, indsæt nu eller tilføj:
img {
behavior: url("/code/pngbehavior.htc");
}
Bemærk at gennemsigtighed ved PNG'erne ikke virker ved baggrunde, men kun
som indsat billeder, hvor størrelsen er angivet!
/Thrane