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

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

letölthető HTC-k:

Kapcsolódó bejegyzések:
  • Biztos láttad már honlapokon azt a fajta megoldást, amikor a kis thumbnail képekre kattintva nem a lapba vagy új ablakba jelenik meg a kép, hanem “beszürkül” a h …

  • Nemrég én is “felhomályosultam”, hogy az Internet Explorer 6-os verziója nem kezeli a transzparens png-ket. A következő, igen egyszerű és gyorsan beépíthető mego …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Találtam ma egy nagyon hasznos JS-t (fixie.js), amely arra hivatott, hogy a sitebuilderek életét kicsit megkönnyítse. Méghozzá azáltal, hogy a fixie.js használat …

  • Gyakran felmerülő kérdés, hogy lehet egy dobozt absolute pozícionálással egy olyan lapszerkezetben elhelyezni, ahol a lap tartalma mindig középen van, tehát a do …

A cikket beküldte: Harder (http://blog.harder.hu)

4 hozzászólás

  1. Doenroy says:

    Érdekességnek hozzáfűzném, hogy amennyiben a javascriptes megoldásnál nem használunk “blank.gif”-et, akkor is működni fog, viszont ugyanúgy szükség van a “.kattinthatolinkekdoboza” class-ra, ha linkelt szöveg van az adott képen. Ha szintén javascripttel oldottuk meg a scrollbart, bizonyos esetben IE alatt összebalhéznak, bár minimálisan, konkrét példa a flexcroll. Vagy talán ez attól van, hogy a js-ses kód IE-nél random megöli a jpg kiterjesztésű képeket, php-s indexfájlnál az említett “villanás” eltarhat jó sokáig is, esetemben például ablak el- és visszaváltásig. FF alatt nincs semmi gubanc. Szóval szerintem aki jópár js-sel dolgozik, az ne ezt a verziót erőltesse.

  2. Sly says:

    A JS megoldás működő képes bár háttérnek tettem be egy képet egy nagyobb DIV-be és elugrott a bal felső sarokba a kép.
    a background-position: center bottom nem hatott rá…

  3. istennyila says:

    Ha a problémás png képek nem a html-ben, hanem a hivatkozott css-ben vannak belinkelve, akkor mi a megoldás?

  4. krs says:

    Köszöntem a segítséget!

Szólj hozzá
a Átlátszó (transzparens) PNG-k használata IE böngésző alatt c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>