Корректор PNG

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем Gryphan, 19.09.2007.

  1. Gryphan
    Offline

    Gryphan Недавно здесь

    Регистрация:
    17.08.2007
    Сообщения:
    95
    Симпатии:
    1
    Пол:
    Мужской
    проблемма с отображением прозрачных 32х битных png картинок под IE 5.5 - 6 ... нашёл на джуме бот от адептуса типа должен исправлять траблу - да в контенте теперь пнгшки фиксяться вот шапка так и осталась непрозрачной, кто нибудь имеет вариант решения проблеммы ?
     
    Последнее редактирование: 19.09.2007
  2.  
  3. boston
    Offline

    boston Russian Joomla! Team

    Регистрация:
    10.10.2005
    Сообщения:
    525
    Симпатии:
    12
    Пол:
    Мужской
    Ответ: Корректор PNG

    Gryphan, шапка наверно в css прописана, вот бот его и не обрабатывает.
     
  4. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Корректор PNG

    Ага, на той недели сам с этим столкнулся: IE6 не использовал уже довольно порядочно, а в IE7, Firefox 2 и Opera 9, естественно, ни какого намека на подобного рода проблемы. Переставил систему, воспользовался шестой версией, и меня охватил такой ужас, словами не выразить.

    Фишка в том, что "дядя Билли и его свита" не позаботились о спокойствии разработчиков веб-сайтов и вовремя не внедрили в браузеры своей корпорации поддержку альфа-канала для передачи цвета, которую как раз использует формат PNG. С цветом, конечно, все пучком, а вот с прозрачностью дела обстоят несколько иначе. Вот пара статей на эту тему:
    PNG-прозрачность в IE 5.5-6
    PNG, альфа прозрачность и Internet Explorer

    Теперь о решении. Скачать и установить мамбот CorrectPNG, а затем включить его использование на своем проекте, увы, не достаточно, по крайней мере, для графических элементов, прописанных намертво в коде шаблона. Всю графику в формате PNG в 'index.php' и 'template_css.css' необходимо описать через фильтр AlphaImageLoader. Вот пример для одного графического элемента:
    Код (CODE):
    1. <div id="mainImage"><img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="templates/<?php echo $cur_template; ?>/images/mainImage.png" width="150" height="100" border="0" alt="" /></div>

    Код (CODE):
    1. div#mainImage { width: 150px; height: 100px; position: absolute; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/mainImage.png'); }


    Проблему решил благодаря sourpuss и его содействию в этом вопросе, за что еще раз выражаю ему свою благодарность!
     
  5. Gryphan
    Offline

    Gryphan Недавно здесь

    Регистрация:
    17.08.2007
    Сообщения:
    95
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Корректор PNG

    интересно глянуть статистику по браузерам- сколько щас народу всё ещё юзает IE 6 и ниже ??
    гемор нереальный - тема испольует три разных картинки шапки через styleswithcher - так вот я думаю может нестоит заморачиваться на тех кто ещё необновил свой браузер - хотя для серьёзных проэктов ето важно ...
     
  6. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Корректор PNG

    В нашей стране IE6 используют и в дальнейшем будут использовать очень много пользователей. Причина этого, думаю, известна всем, и о ней не стоит говорить.

    Статистика впечатляет, вот например то, какой она является к этому моменту по пользователям сети, посетившим сервис электронной почты Mail.Ru:

    IE и основанные на IE................................78,62%

    Microsoft Internet Explorer 6.............................64,26%
    Microsoft Internet Explorer 7.............................12,55%
    Microsoft Internet Explorer 5...............................1,45%
    Microsoft Internet Explorer 5.5............................0,32%
    Microsoft Internet Explorer 4...............................0,05%
     
  7. Gryphan
    Offline

    Gryphan Недавно здесь

    Регистрация:
    17.08.2007
    Сообщения:
    95
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: Корректор PNG

    ого жесть ! значит просто перерирую лого в 8бит png он нормально отображается в них ... или же если есть код для css для background тега ?
     
  8. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Регистрация:
    25.07.2007
    Сообщения:
    633
    Симпатии:
    34
    Пол:
    Мужской
    Ответ: Корректор PNG

    К великому сожалению, с бэкграундом фильтр работать не будет - картинку в шаблоне нужно прописывать через тег <img />.
     
  9. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    424
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: Корректор PNG

    Мамбот CorrectPNG вобщем то работает в IE6, но прозрачность появляется гдето через секунду после загрузки, что выглядит сразу не очень красиво. Хотел попробовать скрипт PluginIE7, который исправляет эту проблему с прозрачностью для ослов от 5 версии, но ссылки везде неживые.
    А проблема актуальна, так как пнг формат в 32 бита пока самый актуальный, так как что 8 бит что гиф формат, дают рваные края рисунку, если рисунок сложный и с тенью.

    AmmiAk, спасибо за код, надо будет попробовать.

    С багроунд у меня пока проблем небыло с пнг файлами, прозрачность была всегда. Вобщем IE6 только в бакгроунд с пнг нормально работает как не пародоксально.
     
  10. soulja
    Offline

    soulja Недавно здесь

    Регистрация:
    14.09.2007
    Сообщения:
    35
    Симпатии:
    1
    Ответ: Корректор PNG

    Была такая проблема, решил проще, сделал jpg картинку, вырезал/нарисовл нужный background. Фотошоп в руки и все будет как надо.
     
  11. agruts
    Offline

    agruts Russian Joomla! Team

    Регистрация:
    01.03.2006
    Сообщения:
    612
    Симпатии:
    21
    Пол:
    Мужской
    Ответ: Корректор PNG

    Код (CODE):
    1. <script type="text/javascript">
    2.  
    3. if (typeof blankImg == 'undefined') var blankImg = 'templates/template_name/images/blank.gif';  //указываем путь к чистому изображению
    4.  
    5.  
    6. function filt(s)
    7. {
    8.  var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
    9.  s = (s || '').replace(/\(/g, '%28').replace(/\)/g, '%29');
    10.  if (filters[f])
    11.  {
    12.   filters[f].enabled = s ? true : false;
    13.   if (s) with (filters[f]) { src = s }
    14.  }
    15.  else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="scale")';
    16. }
    17.  
    18. function iePNGFix()
    19. {
    20.  if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
    21.   (event && !/background|src|className/.test(event.propertyName))) return;
    22.  
    23.  if (event && event.propertyName == 'className' &&
    24.   style.backgroundImage.indexOf('url(') == -1) style.backgroundImage = '';
    25.  var bgImg = currentStyle.backgroundImage || style.backgroundImage;
    26.  
    27.  if (tagName == 'IMG')
    28.  {
    29.   if ((/\.png$/i).test(src))
    30.   {
    31.    if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    32.     style.width = offsetWidth + 'px';
    33.    filt(src);
    34.    src = blankImg;
    35.   }
    36.   else if (src.indexOf(blankImg) < 0) filt();
    37.  }
    38.  else if (bgImg != this._png_bgImg)
    39.  {
    40.   this._png_bgImg = bgImg;
    41.   if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
    42.   {
    43.    var s = RegExp.$1;
    44.    if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
    45.     style.width = offsetWidth + 'px';
    46.    style.backgroundImage = 'none';
    47.    filt(s);
    48.    // IE link fix.
    49.    var links = all.tags('a'), i = links.length;
    50.    if (i && style.position && /relative|absolute/.test(style.position))
    51.     alert('IEPNGFix: Links can\'t be within positioned elements!');
    52.    while (i--) links[i].style.position = 'relative';
    53.   }
    54.   else filt();
    55.  }
    56. }
    57.  
    58. iePNGFix();
    59.  
    60. </script>

    создаем отдельный файл iepngfix.htc , а в шаблон - это (в голову):
    Код (CODE):
    1. <style type="text/css">
    2. img { behavior: url(<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/iepngfix.htc); }
    3. </style>
     
    Последнее редактирование: 28.09.2007
  12. PavelCh
    Offline

    PavelCh Недавно здесь

    Регистрация:
    15.02.2006
    Сообщения:
    104
    Симпатии:
    6
    Пол:
    Мужской
    Ответ: Корректор PNG

    Скрип не работает...(
     
  13. Fanamura
    Offline

    Fanamura Доброта

    Регистрация:
    12.03.2007
    Сообщения:
    5 108
    Симпатии:
    159
    Пол:
    Мужской
    Ответ: Корректор PNG

    А у меня работает
     

Поделиться этой страницей

Загрузка...