Прозрачный PNG в IE 6
Достигается на самом деле довольно-таки легко. Берем прозрачный png, берем следующий код:
<script type="text/javascript">
function fixPNG(element)
{
//Если браузер IE версии 5.5-6
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;
if (element.tagName==’IMG’) //Если текущий элемент картинка (тэг IMG)
{
if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
{
src = element.src;
element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
}
}
else //иначе, если это не картинка а другой элемент
{
//если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
if (src)
{
src = src[1]; //берем из значения свойства background-шmage только адрес картинки
element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
}
}
//если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’" + src + "‘,sizingMethod=’scale’)";
}
}
</script>
Вставляем ПЕРЕД следующим html:
<div style=”background: url(some.png) no-repeat;” class=”someclass”><a href=”#”>Ссылка</a></div>
Или таким, если png вставляется не бекграундом:
<div class=”someclass”><img src=”some.png” /></div>
Остается добавить в css следющее:
.someclass {
filter:expression(fixPNG(this));
}
Все, теперь png во всех браузерах прозрачная!
Остается добавить – что если сверху png присутствуют какие-либо ссылки, или интерактивные поля (формы и т.п.), то они будут ниже картинки и не кликабельны, решается это просто, добавляется объекту, который нужно поставить выше position: relative;
На данном примере это выглядит так:
.someclass a {
position: relative;
}
Август 4th, 2008 at 1:06 пп
спасибо, очень помогло!
Декабрь 11th, 2008 at 7:21 пп
Спасибо, помогло, все супер. Только может я одна такая, но я не сразу сообразила, что чтобы скрипт заработал нужно его сначала в блокнот вставить (чтобы курсивное форматирование очистить). =)
Декабрь 12th, 2008 at 4:42 пп
Да, это вордпресс из меняет, писал уже тут как исправить, видимо не правильно написал, раз не помогло )
Февраль 1st, 2009 at 7:08 пп
Спасибо, всё работает!
Февраль 5th, 2009 at 9:31 пп
Может быть я что то сделал не так?
У меня в div лежит кнопка формы картинкой (ессно прозрачный PNG), так вот в ходе всех этих махинаций – да, таки заработало но наблюдается очень забавный эффект – та область картинки которая 100% прозрачна стала кликабельна, а все остальное – нет.
Февраль 8th, 2009 at 6:18 пп
AlexKey – с z-index поиграйся, не очень понял о чем ты
Или код дай
Февраль 9th, 2009 at 12:46 пп
Все хорошо, только свойству sizingMethod лучше присвоить значение crop, так как если размер контейнера больше размера фонового изображения, то оно растягивается на всю доступную область (scale), что приводит к искажениям. В этой же ситуации возникает еще одна трудность: если фоновая картинка первоначально отбита вправо внутри контейнера (div), то после "трансформации" выравнивание теряется и изображение прибивается влево
Как это решать еще разбираюсь.
Февраль 19th, 2009 at 7:46 пп
Ну и что толку копировать то что уже года три как написано кем то, ты бы лучше придумал как пнг прозрачную картинку положить на фон, да так что бы он понимал свойства position и repeat… каквставлять фитром картинки я думаю уже каждый дурак и каждая дурачка знает.
Февраль 24th, 2009 at 10:55 дп
каквставлять фитром картинки я думаю уже каждый дурак и каждая дурачка знает.
Блин если ты знаешь, это не значит что какой-нибудь начинающий вебмастер знает.
Ну и что толку копировать то что уже года три как написано кем то
Ты смотрю мало понимаешь в зарабатывании денег на сайте
Март 28th, 2009 at 6:13 пп
"каквставлять фитром картинки я думаю уже каждый дурак и каждая дурачка знает."
ну что вы, дяденька)) далеко не каждый)) новичкам действительно очень в тему.
Апрель 16th, 2009 at 6:28 пп
а вы мне тока скажите плиз что делать с файлом gif какой он должен быть? чета ниче не поняла(((
Апрель 16th, 2009 at 8:44 пп
Leo, гиф файл – прозрачная гифка 1×1 пиксель, вот, сохраняй изображение как
http://www.fixblog.ru/files/blank.gif
Май 14th, 2009 at 10:12 дп
Отлично все работает! Спасибо!
Август 18th, 2009 at 5:47 пп
может всё-таки:
если png вставляется не бекграундом:
Остается добавить в css следющее:
.someclass IMG {
filter:expression(fixPNG(this));
}
???
хотя у меня и так и эдак не заработало с img. спасибо Igor’ю: "sizingMethod лучше присвоить значение crop" очень помогло.
Август 20th, 2009 at 5:47 пп
Вот исправленный, рабочий код этого способа:
javascript:
function fixPNG(element)
{
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
var src;
if (element.tagName==’IMG’)
{
if (/\.png$/.test(element.src))
{
var src = element.src;
element.style.width = element.width + "px";
element.style.height = element.height + "px";
element.src = ‘blank.gif’; //прозрачный однопиксельный gif
}
}
else
{
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
if (src)
{
src = src[1];
element.runtimeStyle.backgroundImage="none";
}
}
if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’" + src + "‘,sizingMethod=’crop’)";
}
}
html:
или
css:
.png {filter:expression(fixPNG(this));}
Внимание! все фиксы png в IE6 не позволяют использовать повторяющийся фон! Однако фон можно тянуть (sizingMethod=’scale’), но если фон настолько примитивен, что его можно без ущерба растягивать, то, пожалуй, стоит использовать gif.
p.s. кстати, стоит отметить, что данный способ ручного вызова функции fixPNG работает намного быстрее, чем способы которые сами находят png на странице(в результате при загрузке страницы пол-секунды видны непрозрачные картинки). При использовании же данного способа fix происходит мгновенно.
Август 20th, 2009 at 5:53 пп
в предыдущем посте фильтр съел две строчки:
html:
{img class="png" src="image.png" /}
или
{div style=”background: url(image.png) no-repeat;” class=”png”}{/div}
{ } заменить на
Октябрь 6th, 2009 at 6:31 пп
А у меня ничего не получается
у меня картинка на прозрачном фоне (Titul-1.png).
Какой именно код нужно поставить и куда? перед строкой
???
Ребята, помогите наовичку!