Transparent PNG hatterkepkent IE-ben

Anonymous · 2005. Nov. 5. (Szo), 01.58

Sziasztok!

Mint azt bizonyara ti is tudjatok az IE csak ganyolassal kepes megjeleniteni
atlatszo PNG-t. Pl. itt van errol doksi:

http://homepage.ntlworld.com/bobosola/pngtest.htm

Az oldalon talalhato leiras jol is mukodik normal kepekre. De background kepre sajos nem megy.

Vmi ilyesmivel probalkoztam:

<style type="text/css">
.classTblBckg 
{ 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='my.png'); 
    background-repeat: no-repeat; 
    background-position: bottom right;
}
.classTblBckg[class]
{ 
    background-image: url("my.png");
}
</style>

Ez firefox-ban okes, de IE-ben kozepre, felnagyitva rakja be a hatterkepet.
Letezik arra vmifele ganyolas, hogy IE is normal meretbe, bottom right-ba tegye a hatteret?

Koszi!

■

HTML, CSS, JavaScript, Ajax

csirip

google

Őry Máté · 2005. Nov. 5. (Szo), 09.24

http://www.google.com/search?q=AlphaImageLoader+msdn
elso ket talalat
[amugy atlatszo png-t kezeli (ha 16bites(gimpben: kep-mod-indexelt-256szin-ok)), csak az alphalayerrel gyulik meg a baja (24bit)]

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Szia!

Anonymous · 2005. Nov. 5. (Szo), 10.49

Firefox es a Mozilla alapu bongeszok jol jelenitik meg.
Internet Explorernel kell ez a kis trukk: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/AlphaImageLoader.asp

En valahogy igy oldottam meg:


<?php
function png24($fileUrl, $filePath) {
  $size = GetImageSize($filePath);
  if (strpos($_SERVER["HTTP_USER_AGENT"], "MSIE")) {
    $image = "<img src=\"" . TEMPLATE_URL . "images/spacer.png\" 
             style=\"width: " . $size[0] . "px; height: " . $size[1] . "px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" . $fileUrl . "', sizingMethod='scale');\"  />";
        return $image;

    } elseif(strpos($_SERVER["HTTP_USER_AGENT"], "Gecko")) {
        $image = "<img src=\"" . $fileUrl . "\" width=\"".$size[0]."\" height=\"" . $size[1] . "\" />";
        return $image;
    } else {
        return false;
    }
} 
?>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

'background-image:' ezt hogy kombinaljam a 'filter:'-rel?

Anonymous · 2005. Nov. 5. (Szo), 12.42

Koszonom, hogy megprobaltatok segiteni, de asszem sajnos nem ertettetek meg a kerdesem.
Az AlphaImageLoader segitsegevel en is meg tudok jeleniteni normal <IMG> kepet IE alatt is. A problema akkor van, ha hatterkepkent akarom a kepet berakni.

Szal azt szeretnem, hogy kulonbozo szinu dobozokban legyen egy hatterkep a jobb also sarokban.

Itt egy tesztoldal:

http://eat.srv.hu/png/

firefox-al minden okes.
IE-vel nem.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Én feladnám

Anonymous · 2005. Nov. 5. (Szo), 14.29

Az a baj, hogy nem fér bele a css logikájába, hogy a background-image és a filter kombinálódjon, hiszen mind a kettő tulajdonság, amit egy selectorra (element, class vagy id) tudsz alkalmazni. Felteszem, hogy egy mázsa javascripttel megoldható a dolog, de nem éri meg a fáradságot, mert a megoldás úgyis teljesen elveszti az eleganciáját.
Jobban jársz, ha csinálsz több megfelelő színű jpg-t, azok együtt sem lesznek akkorák, mint ez a 265 K méretű png.
Aztán meglátjuk, mit tud az IE7.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

JPG

Anonymous · 2005. Nov. 7. (H), 01.20

Igen, asszem ez a megoldas. Csak eloszor azon filoztam, hogyan tudom egyszeruen legyartani a kulonbozo hatterszinu kepeket photoshopban, de mar rajottem a modjara.

Azert kosz mindekinek!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Nekem sem

kades · 2005. Nov. 16. (Sze), 20.14

Helló!

Én is hasonló problémával küzdök.

<DIV ID="oDiv" STYLE="position:relative;  width:200px; color:gold; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='back.png');" >
<a href="/link.html">The World</a></DIV>

A részlet az MS oldalról lett ideollózva. A kiegészítés csak annyi, hogy beszúrtam egy linket, ami viszont AlphaImageLoader használata után nem
működik.

Van valakinek valamilyen ötlete hogyan lehetne a linket működésre bírni?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<Nincs cím>

Anonymous · 2005. Nov. 16. (Sze), 20.41

Már nem tudom honnan szedtem, én egy sleight.js nevű scripttel oldottam meg anno.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<Nincs cím>

kades · 2005. Nov. 17. (Cs), 19.53

Esetleg el tudnád küldeni az oldal címét ahol felhasználtad? Vagy valahogy eljuttatni hozzám azt a scriptet?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Google?

Bártházi András · 2005. Nov. 17. (Cs), 21.23

Miért nem keresel rá a Google segítségével?

-boogie-

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<Nincs cím>

kades · 2005. Nov. 18. (P), 00.23

Az volt az első, de ez nem megoldás a link problémára (vagy csak én
vagyok már nagyon fáradt) Viszont, találtam egy oldalt ami ilyen témákkal
fogalkozik. Rögtön e-mailt is írtam és a válasz gyorsan jött.
Idézném is a levelet és hát természetesen hálás köszönetem
Gellértnek a gyors segítségért.
Remélem segítség azoknak akik hasonló problémával küzdenek.

Szia!
Igen, ez egy másik IE bug.
Javaslom, hogy kerüld meg a hibát (bár nem szép megoldás ez): ne
háttérképet rakj be, hanem img elemet és helyezd alá a dobozodnak. Ha
ügyes vagy, akkor meg tudod csinálni, hogy csak IE-ben szkripttel hozod
létre ezt az IMG elemet. Ennek működnie kell.
Sok sikert!
Gellért

> Helló!
>
> Örömmel olvastam az oldaladon található webes cikkeket.
> Az alábbi megoldás is nagy segítségemre volt:
> http://arcok.ujevangelizacio.hu/bubu/examples/ie-png.html
> De, felmerült vele kapcsolatban egy problémám,amit sehogy
> sem bírok megoldani. Ha átlátszó png-t használok háttérnek
> a linekek azon a részen működnek csak ahol kép átlátszik.
> Az érthetőség kedvéért ide raktam egy példát:
> http://www.pcprof.hu/prb1/
>
> Tudnál esetleg valami megoldást arra hogyan lehetne működővé
> tenni minden linket?
>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Klikkelhető linkek alphaimageloader filterrel megadott divben

Barkóczi Roland · 2006. Júl. 18. (K), 11.37

Egy fél napi szívás után szeretném megosztani veletek a témában elért eredményemet:
Adott egy div: #tartalom
IE specifikus css:

#tartalom
{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/css/pic/level0_body.png', sizingMethod='scale', enabled=true);
}

Ekkor az a nagy helyzet, hogy nem lehet kattintani a linkekre, az objektumok nem fogadják az onclick eseményeket, nem lehet megváltoztatni a kurzort, nem működik semmi.

Sajnos az angol nyelvű forumokon sem találtam semmit, illetve itt egy kis reménysugarat:
http://www.allinthehead.com/retro/69/

Végigolvasva a témát, és a következőre jutottam:

Adjuk hozzá az oldalhoz a következő css szabályt, minden működni fog:

#tartalom *
{
position: relative;
}

Link: http://haassohn.aer.hu

A hozzászóláshoz regisztráció és belépés szükséges
új téma

kicsit bővebben, ill. egy másik megoldás

toxin · 2006. Júl. 18. (K), 11.46

ha fenti nem megy,

http://www.satzansatz.de/cssd/tmp/alphatransparency.html

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés