DD_belatedPNG: transzparens, átlátszó hátterű PNG-k IE6 alatt

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ő megoldást szeretném ismertetni.

A szkriptről röviden csak annyit (mint háttérinformáció):

  • nem használja a Micro$oft „AlphaImageLoader” nevű förmedvényét
  • támogatja a háttér pozícionálást (background-position), valamint a háttérismétlést (background-repeat)
  • valamint javítja az IE6 alatt tapasztalt „szürke háttér” problémát

A DD_belatedPNG használata:

1
2
3
4
5
6
7
8
9
10
11
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
 
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

A fenti kód <head> tag-ban foglal helyet.

Értelemszerűen minden olyan elemnek, amelynek a háttere vagy a forrása png képre hivatkozik, és transzparenssé szeretnénk tenni: a példa alapján ’png_bg’ class-al látjuk el.
div-ek id-jét meg lehet adni, ha a hátterük, vagy a bennük lévő div-ek háttere png kép. DE, ’body’-t nem választhatjuk ki!
Továbbá megadhatjuk akár az ’img’-t is, így minden ’img’ taget „átkonvertál”.

Pár példa a helyes használathoz:

1
DD_belatedPNG.fix('#div_neve');
1
DD_belatedPNG.fix('#div_neve, img, .class_nev');

A szkript ezen a címen érhető el: DD_belatedPNG: Medicine for your IE6/PNG headache!

5 HOZZÁSZÓLÁS

  1. rengeteg ilyen és hasonló hack van IE6-ra, hiszen a szerencsétlen egy halom problémával küzd.
    El kellene jutni oda, hogy aki IE6-ot használ, annak folyamatosan 1-2 percenként beugrik egy ablak az aktuális böngészőket ajánlva.
    pl. a gmail vagy a youtube is ezt csinálja -igaz csak fent egy sorban jelenik meg, h chrome-ot használj…

  2. most látni a leírást és ki is próbáltam, eddig amikkel dolgom volt, messze ez a legjobb, egyszerű és gyors. köszönet érte!

  3. Teljesen jó megoldás ez is, ehhez még tudnám ajánlani a slimejs-t is, amely olyasmi mint a dd-belated megoldás. drupalnal, joomlanal pl ez utobbiak helyett alkalmaztam a fentebbit, mert egyszerűbb, ugyanakor a dd-belated nagyon jól konfigurálható, cserébe jó sok memoriát kér :)

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét