Átlátszó (transzparens) PNG-k használata IE böngésző alatt

Gondolom már sokan beleszaladtak webszerkesztés közben az alábbi IE hibába: nem kezeli az átlátszó (transzparens) png képeket, sajnos azok háttere szürke alapértelmezetten (a normálisabb böngészőknek - mint pl. a Firefox - ez semmiféle problémát nem jelent). Ez abból az egyszerű okból fakad, hogy az IE 6.0 azon kívül hogy igencsak öregecske program, a webes szabványok támogatásában sem jeleskedik. A legtöbb hibájára viszont van megoldás, így erre a png megjelenítésre is. Többféle megoldás is található a neten:

• Varga Bence - javascriptes megoldása
• Gyuris Gellért megoldása htc-s megoldása
• Erik Arvidsson megoldása szintén htc-s megoldása

A javascriptes megoldás

Varga Bence megoldása számomra szimpatikus abban az esetben, ha a felhasználni kívánt png képeket ténylegesen mint képek szeretném felhasználni a lapon, hisz kényelmesen és gyorsan orvosolja az IE problémáját. Mindössze egy javascript fájlt (illetve egy 1x1px-es transzparens gif-et) kell letöltenem és belinkelnem a head-be.

// png képek átalakítása Internet Explorer számára
// forrás: http://vbence.web.elte.hu/ie_png_alpha.html
// szerző: Varga Bence

function alphaFixIE() {
	var s, i, j;
	
	// IMG
	var els = document.getElementsByTagName("IMG");
	for (i=0; i<els.length; i++) {
		s = els[i].src;
		if (s.toLowerCase().indexOf(".png") != -1) {
			els[i].src = "spacer.gif";
			els[i].style.filter += "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + s + "', sizingMethod=image);";
		}
	}
	
	// CSS: background
	for (i=0; i<document.styleSheets.length; i++) {
		var pos = document.styleSheets[i].href.lastIndexOf("/");
		var cssDir = (pos != -1) ? document.styleSheets[i].href.substring(0, pos + 1) : "";
		for (j=0; j<document.styleSheets[i].rules.length; j++) {
			var style = document.styleSheets[i].rules[j].style;
			if (style.backgroundImage.toLowerCase().indexOf(".png") != -1) {
				var filename = style.backgroundImage.substring(4, style.backgroundImage.length - 1);
				if (filename.indexOf("http://") != 0 && filename.indexOf("/") != 0)
					filename = cssDir + filename;
				style.backgroundImage = "none";
				style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + filename + "', sizingMethod='crop');";
			}
		}
	}
}

if (navigator.userAgent.indexOf("MSIE") != -1 && navigator.userAgent.indexOf("Windows") != -1)
	window.attachEvent("onload", alphaFixIE);

Az 1x1px-es transzparens gif kép letölthető innen: blank.gifA HTML oldalba a lementett javascriptet az alábbi módon kell beilleszteni (persze az útvonal mindenkinél más és más lehet):

<script language="Javascript" src="javascriptutvonala/alphaimages.js"></script>

A fenti megoldás abban az is esetben is működik, ha a PNG képet mint hátteret szeretnénk felhasználni a lapon. Ekkor viszont az Internet Explorer a linkeket nem jelzi a szokásos kis kéz ikonnal, ezért a honlaphoz tartozó CSS-be érdemes felvenni az alábbi részletet:

a { cursor: pointer; }

Előnye, hogy használata pofonegyszerű. Hátránya, hogy használatával IE alatt a transzparens háttérkép betöltődése előtt van egy pillanat, amikor a háttér még nem jó (villanás). A megtekinthető demo oldal: demo-js.html#### A HTC-s megoldás

Gyuris Gellért és Erik Arvidsson htc-re alapuló megoldása szintén nem bonyolult, az alapja nagyon hasonló mint a fentinek, csak itt egy htc fájl eléréri útját kell beilleszteni a kódba az alábbi módon: HTML head-be illesszük be:

<!--[if gte IE 5]>
<style type="text/css">
<!--
img {
 behavior: url("htc/pngbehavior.htc");
}
-->
</style>
<![endif]-->

Ez annyit fog csinálni, hogy ha IE-vel nézik a lapot, akkor az "img" tagekhez rendeli a htc-ben definiált viselkedést. Ezután már a szokásos módon csak lehet használni a képeket a kódban, pl.:

<img src="images/tutorial.png" width="150" height="74" />

Átlátszó png mint háttérkép

Az átlátszó hátterű dobozok átka, hogy IE alatt a bennük lévő linkek nem kattinthatóak. Persze erre is van megoldás, de haladjunk sorban.. Először is nézzük, hogy lehet egy doboznak (pl. div-nek) átlátszó hátterű PNG-t megadni. A Firefox-nak és társainak elég az alábbi CSS kód:

.pnghatter {
  width: 150px;	/* a doboz szelessege */
  height: 150px;	/* a doboz magassaga */
  background-image:url(images/sargahatter.png); /* a doboz hattere */
  text-align: center;	/* a doboz szovegenek rendezese kozepre */
}

Majd az ehhez tartozó HTML kód:

<div class="pnghatter">tartalom</div>

Az IE miatt megint csak a head-be illesztendő feltételes cucchoz kell folyamodnunk, és beilleszteni az alábbi kódot:

<!--[if gte IE 5]>
<style type="text/css">
<!--
.pnghatter {
  BACKGROUND: none transparent scroll repeat 0% 0% !important; 
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sargahatter.png', sizingMethod='scale') !important; 
}
-->
</style>
<![endif]-->

Az AlphaImageLoader-ről további információkat lehet olvasni itt: AlphaImageLoader Filter az msdn.microsoft.com -onA kód mindössze annyit fog csinálni, hogy ha a látogató böngészője IE, a fenti filterrel fogja megkapni a CSS classt-t (.pnghatter). E megoldásnak köszönhetően a doboz hátterében már tényleg átlátszó lesz a png, felette megjelenik a szöveg is. lsd a demo oldalon a "doboz 1."-t: demo-hatter.htmlA gond akkor van, ha a doboz tartalma az egyszerű szövegen kívül linkeket is tartalmaz: nem kattinthatóak (lsd "doboz 1." a demóban, IE alatt). Ezért a szöveges/linkes tartalmat egy újabb div-be kell tenni, melynek be lehet állítani a relative pozíciót, illetve a z-index 1-t. Nézzük a mintát:

.kattinthatolinkekdoboza {
  position: relative;
  z-index: 1;
}

A hozzá tartozó HTML kód pedig így néz ki:

<div class="pnghatter">
  <div class="kattinthatolinkekdoboza">
    <a href="http://#">kattinthato link</a>
  </div>
</div>

A működése letesztelhető a demo oldal "doboz 2."-vel dobozába elhelyezett linkkel: demo-hatter.htmlA leírásnak ezennel vége, köszönet a fenti linkek gazdáinak a megoldásokért! Demo oldalak, melyek forráskódja megtekinthető:- demo-js.html

• demo-htc-kep.html
• demo-hatter.html

letölthető HTC-k:- ie-png.htc

• pngbehavior.htc