Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

poizon

Захожу иногда
495
187 / 1
Buu

Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« : 03.07.2008, 20:45:57 »

Натолкнулся еще на один способ заставить IE6 обрабатывать альфа-канал, т.е использовать прозрачность.

Самое чудное в данном решении, что скрипт обрабатывает и background

Для этого качаем файл из приложения, распаковываем в папку js (допустим, если другая не забудьте изменить путь), изменяем YOUREMPLATENAME на имя своего шаблона и вписываем код, что ниже в <head>
...
</head>

Код


<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/templates/YOUREMPLATENAME/js/jquery-latest.pack.js"></script> 
<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/templates/YOUREMPLATENAME/js/jquery.pngFix.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script> 
<![endif]-->

Все. Должно работать

[вложение удалено Администратором]

« Последнее редактирование: 12.07.2008, 12:39:29 от poizon »

Записан

>>> А ты прочел FAQ? <<<

PaLyCH

Давно я тут
956
146 / 19
Менеджер проектов

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #1 : 18.07.2008, 15:34:46 »

Мдя. Убивает png на смерть. Скрины ниже
1. Как должно быть (ИЕ7)
2. Как есть (ИЕ6)

[вложение удалено Администратором]

Записан

Исполняю нескромные мечты

Professor

Захожу иногда
59
10 / 0

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #2 : 18.07.2008, 16:19:50 »

Тоже самое.

Записан

poizon

Захожу иногда
495
187 / 1
Buu

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #3 : 18.07.2008, 22:49:27 »

так... как подключены эти 2 файла?

и как построена верстка? т.е какой слой с пнг находится в каком порядке ?

« Последнее редактирование: 18.07.2008, 22:55:12 от poizon »

Записан

>>> А ты прочел FAQ? <<<

PaLyCH

Давно я тут
956
146 / 19
Менеджер проектов

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #4 : 19.07.2008, 18:15:30 »

Подключена, как ты написал. Нашел даже туториал на сайте-источнике. Верстка множествено-вложенные div.

Записан

Исполняю нескромные мечты

koval2001

Осваиваюсь на форуме
13
1 / 0

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #5 : 19.07.2008, 20:08:21 »

Из личного опыта - проще сделать gif с прозрачным фоном, чем мучаться пытаясь подружить png файлы с IE6. Сэкономите время на более важные задачи со строительством сайта.

Записан

poizon

Захожу иногда
495
187 / 1
Buu

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #6 : 19.07.2008, 20:11:34 »

гиф никогда не сделает альтернативы пнг, да и сделать гиф с прозрачным фоном часто сложнее, чем подружить пнг и 6м ослом, потому что вырезать попиксельно границы - это просто трата времени та еще

Записан

>>> А ты прочел FAQ? <<<

..С...е...р...ы...й..

Захожу иногда
51
110 / 2

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #7 : 19.07.2008, 21:52:38 »

не удивительно, но во всех коммерческих шаблонах стоят подобные хаки и очень хорошо работают.
можно смотреть как там сделано, на готовых примерах.
а GIF сравнивать с PNG24, неуместно, тк альфаканал проводить больше никаким другим форматом нельзя, вдобавок качество у PNG-24 неотличимо от BMP-шного
Реальная альтернатива GIF'у - PNG-8 - там и качество идентичное и размер приблизительно одинаковый, чаще у PNG-8 размер меньше чем у GIF.
По этому я его использую вместо GIF'а

Записан

.
..:: Тайны Управления Человечеством ::..
o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o o

Lord Glue

Захожу иногда
95
66 / 0
добрый пандо

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #8 : 21.07.2008, 07:21:23 »

Всем известный IE PNG Fix, который был всем хорош, но который не умел работать с background position и background repeat, наконец - таки исправил этот изъян.

Теперь станет полегче - да что там объяснять, вы наверняка сами понимаете то, что поддержка background position и background repeat это хорошее подспорье.

Стоит учесть, что это Alpha 2, и использовать на "мясе" фикс я бы не рекомендовал, лично я просто буду следить за развитием фикса, потому как не далеко до релиза.

Поддержка, как известно - IE5.5+ PNG. Лицензия не изменилась - GNU LGPL.

Официальная страничка фикса: twinhelix.com

[вложение удалено Администратором]

Записан

MuraDweb

Захожу иногда
267
124 / 1

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #9 : 21.07.2008, 07:54:56 »

Ну, как говорится, будем посмотреть ...

Записан

PaLyCH

Давно я тут
956
146 / 19
Менеджер проектов

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #10 : 21.07.2008, 10:51:29 »

Цитата: Lord Glue от 21.07.2008, 07:21:23

Всем известный IE PNG Fix, который был всем хорош, но который не умел работать с background position и background repeat, наконец - таки исправил этот изъян.

Теперь станет полегче - да что там объяснять, вы наверняка сами понимаете то, что поддержка background position и background repeat это хорошее подспорье.

Стоит учесть, что это Alpha 2, и использовать на "мясе" фикс я бы не рекомендовал, лично я просто буду следить за развитием фикса, потому как не далеко до релиза.

Поддержка, как известно - IE5.5+ PNG. Лицензия не изменилась - GNU LGPL.

Официальная страничка фикса: twinhelix.com

Прозрачность работает,это факт. Но позиция и повторение фона фигово. А так это лучшее решение пока

Записан

Исполняю нескромные мечты

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #11 : 14.08.2008, 19:47:24 »

есть готовое решение с повторение фона, желательно без скрипта?

Записан

ryar

Захожу иногда
86
18 / 0
Всем счастья!

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #12 : 14.08.2008, 21:48:20 »

Вот здесь описано замечательное решение которым давно пользуюсь _http://www.tigir.com/alpha_png.htm работает также и для фоновых изображений.

Записан

AZ

Осваиваюсь на форуме
30
3 / 4
Здесь вам не ТУТ...

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #13 : 16.11.2008, 18:20:58 »

Это использую (не помню где скопипастил), работает на ура, поскольку, даже купив коммерческий шаблон столкнулся с тем, что IE6 не желает нормально отображать бекграунды, а сие "лекарство помогло"...

Вставлять знамо в хейдер....

Код: javascript


 <!--[if gte IE 5.5000]>
 <script language="JavaScript">
 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
    {
    for(var i=0; i<document.images.length; i++)
       {
           var img = document.images[i]
           var imgName = img.src.toUpperCase()
           if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
              {
                  var imgID = (img.id) ? "id='" + img.id + "' " : ""
                  var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                  var imgStyle = "display:inline-block;" + img.style.cssText
                  if (img.align == "left") imgStyle = "float:left;" + imgStyle
                  if (img.align == "right") imgStyle = "float:right;" + imgStyle
                  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle              
                  var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
              + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                  img.outerHTML = strNewHTML
                  i = i-1
              }
       }
    }
 window.attachEvent("onload", correctPNG);
 </script>
 <![endif]-->

Записан

zz84

Осваиваюсь на форуме
47
0 / 0
...

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #14 : 19.12.2008, 22:33:47 »

Цитата: AZ от 16.11.2008, 18:20:58

Это использую (не помню где скопипастил), работает на ура, поскольку, даже купив коммерческий шаблон столкнулся с тем, что IE6 не желает нормально отображать бекграунды, а сие "лекарство помогло"...

Вставлять знамо в хейдер....

Код: javascript


 <!--[if gte IE 5.5000]>
 <script language="JavaScript">
 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
    {
    for(var i=0; i<document.images.length; i++)
       {
           var img = document.images[i]
           var imgName = img.src.toUpperCase()
           if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
              {
                  var imgID = (img.id) ? "id='" + img.id + "' " : ""
                  var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                  var imgStyle = "display:inline-block;" + img.style.cssText
                  if (img.align == "left") imgStyle = "float:left;" + imgStyle
                  if (img.align == "right") imgStyle = "float:right;" + imgStyle
                  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle              
                  var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
              + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                  img.outerHTML = strNewHTML
                  i = i-1
              }
       }
    }
 window.attachEvent("onload", correctPNG);
 </script>
 <![endif]-->

Не работает...

Записан

AZ

Осваиваюсь на форуме
30
3 / 4
Здесь вам не ТУТ...

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #15 : 20.12.2008, 11:04:30 »

Цитата: zz84 от 19.12.2008, 22:33:47

Не работает...

На шаблоне чьего производства не работает, куда вставлялся код?

Записан

zz84

Осваиваюсь на форуме
47
0 / 0
...

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #16 : 22.12.2008, 18:58:34 »

Вставлял между <head> и </head>Шаблон моего производства, но пробовал и на других.. Joomla LE 2008... У меня вообще проблема - не один из подобных фиксов не работает...

Записан

intcorp

Захожу иногда
456
12 / 0

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #17 : 22.12.2008, 23:54:37 »

Цитата: AZ от 20.12.2008, 11:04:30

На шаблоне чьего производства не работает, куда вставлялся код?

Аналогично - не рыботает, шаблон джустины jooway

Записан

AZ

Осваиваюсь на форуме
30
3 / 4
Здесь вам не ТУТ...

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #18 : 24.12.2008, 23:35:20 »

Господа-Товарищи, мне трудно что-либо сказать по вашим шаблонам, поскольку сам юзаю лицензионные от Rockettheme и TemplatePlazza.
Вот в TemplatePlazza.., да собственно и в других своих самопальных применял сей фикс успешно...

Записан

Oriy

Осваиваюсь на форуме
35
2 / 0
«ЗРЮ НА СYЕТY СYЕТЪ»

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #19 : 09.04.2009, 13:42:11 »

Цитата: AZ от 16.11.2008, 18:20:58

Это использую (не помню где скопипастил), работает на ура, поскольку, даже купив коммерческий шаблон столкнулся с тем, что IE6 не желает нормально отображать бекграунды, а сие "лекарство помогло"...

Вставлять знамо в хейдер....

Код: javascript


 <!--[if gte IE 5.5000]>
 <script language="JavaScript">
 function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
    {
    for(var i=0; i<document.images.length; i++)
       {
           var img = document.images[i]
           var imgName = img.src.toUpperCase()
           if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
              {
                  var imgID = (img.id) ? "id='" + img.id + "' " : ""
                  var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                  var imgStyle = "display:inline-block;" + img.style.cssText
                  if (img.align == "left") imgStyle = "float:left;" + imgStyle
                  if (img.align == "right") imgStyle = "float:right;" + imgStyle
                  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle              
                  var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
              + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
                  img.outerHTML = strNewHTML
                  i = i-1
              }
       }
    }
 window.attachEvent("onload", correctPNG);
 </script>
 <![endif]-->

Работать то работает, на своем шаблоне...Но он не решает проблем с Background png!!!(((...Ставил Мамботы CorrectPNG, Ultimate PNG Fix Plugin они также не решают проблему с BG...Понравилось решение из кокогото шаблона, когда заходишь на сайт через ie6 он пишет обнови браузер!!))))...И далее идет перечесление всех косяков ie6..!!!)))))...Очень хорошое решение если делаешь сайт для себя!!!))))

А для BG решения тоже не нашел!!!!...(((..Кто нашел отпишитесь плиз!!!!!
Joomla 1.0

Записан

AZ

Осваиваюсь на форуме
30
3 / 4
Здесь вам не ТУТ...

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #20 : 12.04.2009, 17:38:45 »

Цитата: Oriy от 09.04.2009, 13:42:11

Работать то работает, на своем шаблоне...Но он не решает проблем с Background png!!!(((...Ставил Мамботы CorrectPNG, Ultimate PNG Fix Plugin они также не решают проблему с BG...Понравилось решение из кокогото шаблона, когда заходишь на сайт через ie6 он пишет обнови браузер!!))))...И далее идет перечесление всех косяков ie6..!!!)))))...Очень хорошое решение если делаешь сайт для себя!!!))))

А для BG решения тоже не нашел!!!!...(((..Кто нашел отпишитесь плиз!!!!!
Joomla 1.0

В шаблонах от RocketTheme такое присутствует...

Записан

Olga_E

Осваиваюсь на форуме
22
0 / 0

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #21 : 06.05.2009, 10:21:18 »

Спасибо, Poizon! Очень помогло!!!

Записан

Longmen

Захожу иногда
65
1 / 0

Re: Прозрачный фон PNG-файлов в Microsoft IE [вариант 2]

« Ответ #22 : 04.09.2009, 12:36:51 »

poizon, спасибо. Сегодня решил добить эту прозрачность. Это единственный вариант, который у меня заработал pngbehavior.htc и iepngfix.htc нивкакую не хотели.

Записан