Á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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// 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.gif

A HTML oldalba a lementett javascriptet az alábbi módon kell beilleszteni (persze az útvonal mindenkinél más és más lehet):

1

<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:

1

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:

1
2
3
4
5
6
7
8
9

<!--[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.:

1

<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:

1
2
3
4
5
6

.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:

1

<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:

1
2
3
4
5
6
7
8
9
10

<!--[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 -on

A 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.html

A 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:

1
2
3
4

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

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

1
2
3
4
5

<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.html

A 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