|
|
| Autor |
Wiadomość |
tonik
Od: 12 Sie 2005
Posty: 19
Skąd: Poznań/Włocławek
|
 Wysłany: 16.01.2006, 16:07:45 Temat postu: [Webdesign] Format PNG na stronach |
|
|
witam,
mam pytanie do formatu plików png, daje on niezłe możliwości szczególnie chodzi mi tu o różne stopnie krycia które obsługuje png, no i tu moje pytanie czy ktoś tego używa ? czy się sprawdza ?
testowałem pojedyńcze plik png z różnymi stopniami krycia i w operze i foxie wszystko gra ale jak zwykle IE jest klase niżej i perfidnie nie obsługuje przeźroczystości... może ktoś wie jak sobie z tym radzić ?
pozdrawiam |
|
| ^top |
|
|
|
 |
Varelse
Od: 17 Lip 2005
Posty: 553
|
|
| ^top |
|
|
|
|
saladdin
Od: 15 Wrz 2003
Posty: 754
Skąd: Kraków
|
| Wysłany: 16.01.2006, 20:31:15 Temat postu: |
|
|
| @Varelse - brawo! Jak dzla mnie temat do przyklejenia w tym dziale! |
|
| ^top |
|
|
|
|
tomasz
Carnival Man
Od: 14 Kwi 2002
Posty: 4380
|
| Wysłany: 16.01.2006, 21:23:20 Temat postu: |
|
|
| Popieram i przyklejam. |
|
| ^top |
|
|
|
|
pawel__
Od: 04 Lut 2006
Posty: 3
Skąd: Włocławek
|
|
| ^top |
|
|
|
|
Lemik
Od: 19 Lut 2006
Posty: 2
|
| Wysłany: 19.02.2006, 20:28:20 Temat postu: |
|
|
chciałem zrobić PNG przezroczyste, co jest w innyh przeglądarkach normą i daje radę, a w IE nie.
Próbowałem to kilkoma sposobami z tej strony i nie do końca daje to przezroczystoś PNG
na przykład z tego sposobu: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
działa
a tu... http://p2mforum.tcz.pl/demo.html
nie działa środkowe logo, a czemu, bo PNG stało się podkładem (tłem) komórki/tabeli
Da się to zrobić? by także PNG jako tło było przezroczyste pod IE? Pod Operą i w Firefoxie nie ma z tym problemu... :( |
|
| ^top |
|
|
|
|
Revan
Od: 21 Lip 2004
Posty: 1369
Skąd: Warszawa
|
| Wysłany: 19.02.2006, 23:42:02 Temat postu: |
|
|
Samemu dodaj:
| Kod: |
| filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale') |
Ale kolejny problem w tym, że umieszczając na nim inputa, nie będziesz mógł w niego nic wpisać. |
|
| ^top |
|
|
|
|
kosmodrom
Od: 26 Cze 2006
Posty: 1
|
| Wysłany: 26.06.2006, 13:23:17 Temat postu: |
|
|
| Revan napisał(a): |
Samemu dodaj:
| Kod: |
| filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale') |
Ale kolejny problem w tym, że umieszczając na nim inputa, nie będziesz mógł w niego nic wpisać. |
Revan doprecyzuj dokładnie jak to wstawić w kod żeby działało, bo też próbuję walnąć przeźroczystego png'a jako tło tabeli i wszelkie próby typu:
| Kod: |
| style="background-image: url(obrazek.png); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='obrazek.png', sizingMethod='scale');" |
Powodują jedynie zniknięcie obrazka
Pozdr! |
|
| ^top |
|
|
|
|
arosm
Od: 20 Lis 2004
Posty: 17
Skąd: Bielsko-Biała
|
| Wysłany: 23.09.2006, 08:56:13 Temat postu: |
|
|
to jest dla IE:
* html body div#cien {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="template/shop69/img/outline_luk.png", sizingMethod="image");}
a to dla reszty:
html>body div#cien {background: url(../img/outline_luk.png) no-repeat;} |
|
| ^top |
|
|
|
|
DarekHa
Od: 08 Lis 2004
Posty: 378
|
| Wysłany: 11.10.2006, 15:56:27 Temat postu: |
|
|
Mam pytanie odnośnie tego tworu:
| Kod: |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="obrazek.png", sizingMethod="image"
|
tworze sobie dynamicznie obrazek (obrazek = document.createElement('IMG');
i ten img to jest png właśnie. Jak mu za pomocą javascript nadać mądrość wyświetlenia obrazka png z kanałem alpha?
obrazek.style.???.............no i właśnie co dalej, jak dopisać do styli zmaiast js? chodzi mi o składnie.
OK juz mam, było w jednym z linków podanych wyżej, ehh.... ślepota już mnie ogarnia |
|
| ^top |
|
|
|
|
macek
Od: 19 Lis 2004
Posty: 142
Skąd: łódź
|
| Wysłany: 20.11.2006, 13:43:33 Temat postu: |
|
|
| moja propozycja ? zapisac jako png8 - 128 :) |
|
| ^top |
|
|
|
|
snapshot
Od: 23 Paź 2005
Posty: 46
|
| Wysłany: 07.12.2006, 17:48:09 Temat postu: |
|
|
| PNG działa dla img. Ale chcąc zrobić efekt rollover (poprzez przesunięcie tła) nie mogę uzyskać zadowalającego efektu. Tło się skaluje do wielkości elemenu i nie ukrywa się. Znalazłem też sposoby na to, ale z dodanie onmouseover itp. Jednak chciałbym to zrobić, bez ingerencji w xhtml. Najwyżej mogę pozwolić sobie na zaśmiecenie css dla IE. Czy da się to zrobić? |
|
| ^top |
|
|
|
|
aschnu
Od: 25 Gru 2007
Posty: 3
|
| Wysłany: 25.12.2007, 03:16:52 Temat postu: |
|
|
| kosmodrom napisał(a): |
| Revan napisał(a): |
Samemu dodaj:
| Kod: |
| filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale') |
Ale kolejny problem w tym, że umieszczając na nim inputa, nie będziesz mógł w niego nic wpisać. |
Revan doprecyzuj dokładnie jak to wstawić w kod żeby działało, bo też próbuję walnąć przeźroczystego png'a jako tło tabeli i wszelkie próby typu:
| Kod: |
| style="background-image: url(obrazek.png); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='obrazek.png', sizingMethod='scale');" |
Powodują jedynie zniknięcie obrazka
Pozdr! |
Zostawiam dla potomnych i dla tych co drażni ich angielski na podanych wyżej linkach :) Znalazłem to na sieci,ale wykorzystam do wytłumaczenia jak zastosować ten trick do tła. (2 w nocy więc mogę nie pisać składniowo)
Krok 1:
Tworzymy plik w notatniku W pliku tym wklejamy poniższy kod:
| Kod: |
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}
function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;
var bgImg = currentStyle.backgroundImage || style.backgroundImage;
if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}
doFix();
</script>
</public:component> |
Plik zapisujemy jako np. o nazwie: iepngfix.htc
*htc to oczywiście jego rozszerzenie.
Krok 2:
Plik kopiujemy do folderu w którym mamy nasze strony w (x)html.
Krok 3:
w Stylach css czy to wewnętrznych czy zewnętrznych dodajemy:
| Kod: |
| img, div { behavior: url(iepngfix.htc) } |
Gdzie iepngfix.htc to nasz za importowany plik 9jak ktoś go zapisał pod inna nazwą to taką samą musi podać tu), a div to chyba kazdy wie co to jest :D
Gdy chcemy wykorzystać trick do tła w komórce tabeli, zmieniamy
| Kod: |
| img, div { behavior: url(iepngfix.htc) } |
na np.
| Kod: |
| img, td { behavior: url(iepngfix.htc) } |
Pozdrawiam.
Ps. Zapomniałem dodać, ze wymagany jest pusty plik *gif (choć u mnie bez niego działało poprawnie) plik nazywa się blank.gif
| Cytat: |
| // This must be a path to a blank image. That's all the configuration you need. |
co do:
| Kod: |
| img, div { behavior: url(iepngfix.htc) } |
po przecinku można dodawac kolejne selektory, jakie ma obejmować skrypt, np.
| Kod: |
| img, div#logo, div#trescg, div#trescd, dt, dd, dl a:link, dl a:visited , dl a:hover { behavior: url(iepngfix.htc) } |
Niestety, ale jeśli ustawimy obrazek png na tło z powtarzaniem, to pod IE wyświetli się on tylko raz, bez powtórzeń. |
|
| ^top |
|
|
|
|
|
|
 |
|
|
|
|
