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