IE6 Png Fix с помощью jQuery
Internet Explorer 6-ой версии (лучший Web-браузер 2000 года 
) входит в состав WindowsXP вплоть до SP3 (возможно и в SP4 ничего не изменится), а это значит что он установлен у большого количества пользователей. А они потециальные посетители Вашего сайта.
Как известно, один из главных недостатков этого браузера - он не умеет отображать прозрачность PNG-изображений. Вместо прозрачности он отображает красивую серую область. Существует несколько способов справиться с этой напастью. Сегодня мы рассмотрим один из самых простых способов. При помощи известной JavaScript библиотеки jQuery.
Предположим, что для JavaScript'ов на Вашем сервере отведена папка js в корне сайта, а изображения в папке images, также в корне сайта.
Если у Вас на сайте не установлена библиотека jQuery - устанавливаем ее. Для этого нужно скачать с сайта http://jquery.com последнюю версию и скопировать в вышеуказанную папку js.
Между тегами <head> и </head> на странице сайта добавим следующий код:
<script type="text/javascript" src="js/jquery.js"></script>
В папку images поместим gif-изображение состоящего из 1 прозрачного пиксела. Прозрачность gif-изображений Internet Explorer 6 поддерживает :). Имя файла с изображением blank.gif. Скачать можно отсюда.
Теперь в папке js создадим файл с именем jqie6pngfix.js следующего соделжания:
// *********************************************
// * jQuery IE6 PNG fix by Alex
// * JavaScript
// * Alex & Natty studio
// * http://portal30.ru
// *
// * Alex & Natty Studio 2010
// *********************************************
/*
* Фиксим PNG для конкретного изображения
*/
function fixPng(png) {
// get src
var src = png.src;
// set width and height
if (!png.style.width) { png.style.width = $(png).width(); }
if (!png.style.height) { png.style.height = $(png).height(); }
// replace by blank image
png.onload = function() { };
png.src = blank.src;
// set filter (display original image)
png.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
/*
*
*/
$(document).ready(function() {
// =========== Фиксим PNG ==============
var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");
if (badBrowser) {
// get all pngs on page
$('img[src$=.png]').each(function() {
if (!this.complete) {
this.onload = function() { fixPng(this) };
} else {
fixPng(this);
}
});
}
// ========= Конец: Фиксим PNG ==============
});
Между тегами <head> и </head>, после добаленной выше строки, подключающей jQuery, на странице сайта добавим следующий код:
<script type="text/javascript" src="js/jqie6pngfix.js"></script>
Вот и все.
(0)
Комментарии: