Skocz do zawartości


Zdjęcie

[css] Przezroczysty PNG w IE czyli grafika na www


  • Zaloguj się, aby dodać odpowiedź
Brak odpowiedzi do tego tematu

#1 Ziele

Ziele

    Biblioteka Zielińskiego

  • 1812 postów

Napisano 20 02 2008 - 12:12

Każdy webmaster, który ma już jakieś pojęcie o tworzeniu stron www zastanawia się jak zbudować ją najlepiej (zoptymalizować do granic możliwości). Aby tego dokonać trzeba zadbać o każdy szczegół.. Dzisiaj poruszymy temat grafiki na stronach www.
Na starcie powiem wam, że osoba, która stosuje grafikę .bmp na stronach www powinna zostać zamknięta w psychiatryku i dostać zakaz do końca życia na korzystanie z internetu :(
Wiele osób poleca bardzo popularny format grafiki jakim jest .gif niestety ma on tylko 256 kolorów, czyli cechuje się słabą jakością. Format .jpg, z pozoru dobry... Wiele kolorów i świetnie nadaje się do zdjęć, ale... Nie obsługuje przezroczystości! :( Został nam już tylko .png. Jest on najlepszym formatem ze względu na jego jakość, wagę oraz jakość przezroczystości. Co w nim takiego niezwykłego? A to, że jest to jedyny format, w którym można ustalać stopień przezroczystości.

Oczywiście gdyby wszystko było idealne świat byłby nudny. Dlatego też w formacie .png jest pewien haczyk. W Internet Explorer 6 i nowszych to co powinno być przezroczyste, jest... białe. Wiele osób załamuje się i najzwyczajniej w świecie traci na jakości grafiki na stronach www przechodząc do formatu .gif. Niepotrzebnie!! Jest pewien trik, który pozwoli nam włączyć przezroczystość formatu .png w przeglądarkach IE.

Potrzebne są nam tylko trzy kody aby trik nam wyszedł. Tak więc na początek do kodu obrazka musimy dopisać parę linijek:
<public:component><public:attach event="onpropertychange" onevent="propertyChanged()" /><script>var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";var realSrc;var blankSrc = "logo-tweaks.gif";if (supported) fixImage();function propertyChanged() {if (!supported) return;var pName = event.propertyName;if (pName != "src") return;// if not set to blankif ( ! new RegExp(blankSrc).test(src))fixImage();};function fixImage() {// get srcvar src = element.src;// check for real changeif (src == realSrc) {element.src = blankSrc;return;}if ( ! new RegExp(blankSrc).test(src)) {// backup old srcrealSrc = src;}// test for pngif ( /\.png$/.test( realSrc.toLowerCase() ) ) {// set blank imageelement.src = blankSrc;// set filterelement.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +src + "',sizingMethod='scale')";}else {// remove filterelement.runtimeStyle.filter = "";}}</script></public:component>
Po napisaniu powyższego kodu na swojej stronie www będzie ona wyglądała identycznie na operze, FF oraz IE (pod względem grafiki, bo mogliście zwalić coś innego :(). Pamiętajcie jednak, że jak napisałem świat byłby nudny gdyby był idealny więc powyższy trik działa wyłącznie dla przeglądarek IE 5.5+. Jeżeli jednak nie chcecie się w to bawić to.. W IE 7 pliki .png działają już przyzwoicie. Szkoda tylko, że nie wszyscy mają IE 7 :(

  • 0

Zobacz więcej tematów z tagiem: tworzenie stron internetowych



Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych