This Might Be Useful
« URLEncode и URLDecode в Delphi
Отключаем показ сетей Ad-hoc в Windows Vista »

Поддержка прозрачности PNG в IE6

Многие из вас, наверняка, сталкивались с прелестями браузера Internet Explorer. Наверняка, Вы даже сталкивались с его «великолепной» поддержкой полупрозрачных PNG файлов. Вот и мы столкнулись с подобной проблемой. Недолгие поиски привели к решению, которым мы с Вами и делимся. Точнее, было найдено даже два решения. Какое их них использовать - выбирать Вам.

Решение номер ноль

Все нижеприведенные решения по сути предназначены для пакетной обработки картинок. Но, по сути, для кажой картинки делается следующее:

PLAIN TEXT
HTML:
  1. <img src="test.png" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="" />

А теперь...

Решение номер один - чиним со стороны клиента

Вся прелесть этой технологии заключается в том, что она распространяется даже на бэкграунды, обозначенные в CSS'е. Все, что Вам нужно сделать, это скачать маленький zip-архив, скопировать файлы из архива в Вашу директорию, и в CSS'е прописать всего лишь одну строчку:

PLAIN TEXT
CSS:
  1. * { behavior: url(iepngfix.htc); }

У этой строчки есть небольшой минус – сильно влияет на скорость отображения (рендеринга) сайта, поэтому можете использовать более точные указания, например:

PLAIN TEXT
CSS:
  1. img { behavior: url(iepngfix.htc); }

или, например:

PLAIN TEXT
CSS:
  1. img, #id { behavior: url(iepngfix.htc); }

Как этим воспользоваться – в Ваших руках, идея, надеюсь, Вам понятна.

Желаю удачи в Ваших проектах! Постоянный читатель Тмба

Решение номер два - чиним на стороне сервера

PLAIN TEXT
PHP:
  1. /**
  2. *  KOIVI PNG Alpha IMG Tag Replacer for PHP (C) 2004 Justin Koivisto
  3. *  Version 2.0.12
  4. *  Last Modified: 12/30/2005
  5. * 
  6. *  This library is free software; you can redistribute it and/or modify it
  7. *  under the terms of the GNU Lesser General Public License as published by
  8. *  the Free Software Foundation; either version 2.1 of the License, or (at
  9. *  your option) any later version.
  10. * 
  11. *  This library is distributed in the hope that it will be useful, but
  12. *  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  13. *  or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
  14. *  License for more details.
  15. * 
  16. *  You should have received a copy of the GNU Lesser General Public License
  17. *  along with this library; if not, write to the Free Software Foundation,
  18. *  Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
  19. * 
  20. *  Full license agreement notice can be found in the LICENSE file contained
  21. *  within this distribution package.
  22. * 
  23. *  Justin Koivisto
  24. *  justin.koivisto@gmail.com
  25. *  http://koivi.com
  26. *
  27. *  Modifies IMG and INPUT tags for MSIE5+ browsers to ensure that PNG-24
  28. *  transparencies are displayed correctly.  Replaces original SRC attribute
  29. *  with a binary transparent PNG file (spacer.png) that is located in the same
  30. *  directory as the orignal image, and adds the STYLE attribute needed to for
  31. *  the browser. (Matching is case-insensitive. However, the width attribute
  32. *  should come before height.
  33. * 
  34. *  Also replaces code for PNG images specified as backgrounds via:
  35. *  background-image: url(image.png); or background-image: url('image.png');
  36. *  When using PNG images in the background, there is no need to use a spacer.png
  37. *  image. (Only supports inline CSS at this point.)
  38. * 
  39. *  @param string $x  String containing the content to search and replace in.
  40. *  @param string $img_path   The path to the directory with the spacer image relative to
  41. *                      the DOCUMENT_ROOT. If none os supplied, the spacer.png image
  42. *                      should be in the same directory as PNG-24 image.
  43. *  @param string $sizeMeth   String containing the sizingMethod to be used in the
  44. *                      Microsoft.AlphaImageLoader call. Possible values are:
  45. *                      crop - Clips the image to fit the dimensions of the object.
  46. *                      image - Enlarges or reduces the border of the object to fit
  47. *                              the dimensions of the image.
  48. *                      scale - Default. Stretches or shrinks the image to fill the borders
  49. *                              of the object.
  50. *  @param bool   $inScript  Boolean flag indicating whether or not to replace IMG tags that
  51. *                      appear within SCRIPT tags in the passed content. If used, may cause
  52. *                      javascript parse errors when the IMG tags is defined in a javascript
  53. *                      string. (Which is why the options was added.)
  54. *  @return string
  55. */
  56. function replacePngTags($x,$img_path='',$sizeMeth='scale',$inScript=FALSE){
  57.     $arr2=array();
  58.     // make sure that we are only replacing for the Windows versions of Internet
  59.     // Explorer 5.5+
  60.     $msie='/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
  61.     if( !isset($_SERVER['HTTP_USER_AGENT']) ||
  62.         !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
  63.         preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
  64.         return $x;
  65.  
  66.     if($inScript){
  67.         // first, I want to remove all scripts from the page...
  68.         $saved_scripts=array();
  69.         $placeholders=array();
  70.         preg_match_all('`<script[^>]*>(.*)</script>`isU',$x,$scripts);
  71.         for($i=0;$i<count($scripts[0]);$i++){
  72.             $x=str_replace($scripts[0][$i],'replacePngTags_ScriptTag-'.$i,$x);
  73.             $saved_scripts[]=$scripts[0][$i];
  74.             $placeholders[]='replacePngTags_ScriptTag-'.$i;
  75.         }
  76.     }
  77.  
  78.     // find all the png images in backgrounds
  79.     preg_match_all('/background-image:\s*url\(([\\"\\\']?)([^\)]+\.png)\1\);/Uis',$x,$background);
  80.     for($i=0;$i<count($background[0]);$i++){
  81.         // simply replace:
  82.         //  "background-image: url('image.png');"
  83.         // with:
  84.         //  "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
  85.         //      enabled=true, sizingMethod=scale, src='image.png');"
  86.         // I don't think that the background-repeat styles will work with this...
  87.         $x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
  88.                 'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
  89.                 ', src=\''.$background[2][$i].'\');',$x);
  90.     }
  91.  
  92.     // find all the IMG tags with ".png" in them
  93.     $pattern='/<(input|img)[^>]*src=([\\"\\\']?)([^>]*\.png)\2[^>]*>/i';
  94.     preg_match_all($pattern,$x,$images);
  95.     for($num_images=0;$num_images<count($images[0]);$num_images++){
  96.         // for each found image pattern
  97.         $original=$images[0][$num_images];
  98.         $quote=$images[2][$num_images];
  99.         $atts=''; $width=0; $height=0; $modified=$original;
  100.  
  101.         // We do this so that we can put our spacer.png image in the same
  102.         // directory as the image - if a path wasn't passed to the function
  103.         if(empty($img_path)){
  104.             $tmp=split('[\\/]',$images[3][$num_images]);
  105.             $this_img=array_pop($tmp);
  106.             $img_path=join('/',$tmp);
  107.             if(empty($img_path)){
  108.                 // this was a relative URI, image should be in this directory
  109.                 $tmp=split('[\\/]',$_SERVER['SCRIPT_NAME']);
  110.                 array_pop($tmp);    // trash the script name, we only want the directory name
  111.                 $img_path=join('/',$tmp).'/';
  112.             }else{
  113.                 $img_path.='/';
  114.             }
  115.         }else if(substr($img_path,-1)!='/'){
  116.             // in case the supplied path didn't end with a /
  117.             $img_path.='/';
  118.         }
  119.  
  120.         // If the size is defined by styles, find them
  121.         preg_match_all(
  122.             '/style=([\\"\\\']).*(\s?width:\s?([0-9]+(px|%));).*'.
  123.             '(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
  124.                $images[0][$num_images],$arr2);
  125.         if(is_array($arr2) && count($arr2[0])){
  126.             // size was defined by styles, get values
  127.             $width=$arr2[3][0];
  128.             $height=$arr2[6][0];
  129.  
  130.             // remove the width and height from the style
  131.             $stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
  132.             // Also remove any empty style tags
  133.             $modified=preg_replace(
  134.                 '`style='.$arr2[1][0].$arr2[1][0].'`i',
  135.                 '',
  136.                 preg_replace($stripper,'',$modified));
  137.         }else{
  138.             // size was not defined by styles, get values from attributes
  139.             preg_match_all('/width=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
  140.             if(is_array($arr2) && count($arr2[0])){
  141.                 $width=$arr2[2][0];
  142.                 if(is_numeric($width))
  143.                     $width.='px';
  144.    
  145.                 // remove width from the tag
  146.                 $modified=str_replace($arr2[0][0],'',$modified);
  147.             }
  148.             preg_match_all('/height=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
  149.             if(is_array($arr2) && count($arr2[0])){
  150.                 $height=$arr2[2][0];
  151.                 if(is_numeric($height))
  152.                     $height.='px';
  153.    
  154.                 // remove height from the tag
  155.                 $modified=str_replace($arr2[0][0],'',$modified);
  156.             }
  157.         }
  158.  
  159.         if($width==0 || $height==0){
  160.             // width and height not defined in HTML attributes or css style, try to get
  161.             // them from the image itself
  162.             // this does not work in all conditions... It is best to define width and
  163.             // height in your img tag or with inline styles..
  164.             if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images])){
  165.                 // image is on this filesystem, get width & height
  166.                 $size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images]);
  167.                 $width=$size[0].'px';
  168.                 $height=$size[1].'px';
  169.             }else if(file_exists($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images])){
  170.                 // image is on this filesystem, get width & height
  171.                 $size=getimagesize($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images]);
  172.                 $width=$size[0].'px';
  173.                 $height=$size[1].'px';
  174.             }
  175.         }
  176.        
  177.         // end quote is already supplied by originial src attribute
  178.         $replace_src_with=$quote.$img_path.'spacer.png'.$quote.' style="width: '.$width.
  179.             '; height: '.$height.'; filter: progid:DXImageTransform.'.
  180.             'Microsoft.AlphaImageLoader(src=\''.$images[3][$num_images].'\', sizingMethod='.
  181.             $sizeMeth.');"';
  182.  
  183.         // now create the new tag from the old
  184.         $new_tag=str_replace($quote.$images[3][$num_images].$quote,$replace_src_with,
  185.             str_replace('  ',' ',$modified));
  186.         // now place the new tag into the content
  187.         $x=str_replace($original,$new_tag,$x);
  188.     }
  189.    
  190.     if($inScript){
  191.         // before the return, put the script tags back in. (I was having problems when there was
  192.         // javascript that had image tags for PNGs in it when using this function...
  193.         $x=str_replace($placeholders,$saved_scripts,$x);
  194.     }
  195.    
  196.     return $x;
  197. }

Приведенная функция обрабатывает картинки png, у которых указаны размеры, а также свойства background-image в CSS.

Не забудьте внимательно посмотреть на параметры функции. Или хотя бы положите заглушку spacer.png в ту же папку, где лежит картинка.

Кроме того необходимо учитывать, что возможны проблемы в случае, если обрабатываемая картинка является ссылкой - в результате работы функции она уходит в background. То есть надо класть блок со ссылкой поверх картинки.

Использовать это очень просто - перед тем, как отослать страницу клиенту пропускаем ее через эту функцию. В резальтате мы имеем исправленные png, но только для тех, у кого MSIE. Остальные получают код без мусора. Еще один плюс заключается в том, что мы избавляем клиента от сравнительно тяжелого JavaScript'а.

- Дата публикации: Monday, May 28th, 2007, 08:26
- Автор: Filosoff
- Разделы: CSS, HTML, JavaScript
- Лента коментариев: RSS 2.0

- Схожие по тематике заметки:

· Отдаем pdf-файл браузеру. Да так, чтобы MSIE его тоже принимал.
· Добавление сторонних сертефикатов в Internet Explorer 7
· Горячие клавиши для Windows Vista, Internet Explorer, Windows Mail
· Настройка внешнего вида переключения между окнами (Alt+Tab)
· Сброс визуальных настроек Windows Explorer

- Коментировать
- Trackback

5 Responses to “Поддержка прозрачности PNG в IE6”


  1. Corsair Says:
    May 28th, 2007 at 20:07 Quote

    Ура! ;) *радуваицо*
    Но, честно говоря, все равно это не помогло, был какой-то глюк с картинкой и решили вообще перерисовать все нафиг. :-)

  2. Hairgel_Addict Says:
    June 25th, 2007 at 16:21 Quote

    фу, какая гадость страшная! есть намного проще способ, как мне кажеться, посредством только CSS.. :)

    могу у себя написать статейку, если интересно. все равно собирался рано или поздно её написать, все забывал..

  3. Hairgel_Addict Says:
    June 25th, 2007 at 17:50 Quote

    вот я лапоть... пардон.. видать я не прогер - игнорировал вариант номер 0 и начал читать с номер 1... мой вариант тоже использует "AlphaImageLoader", только вместо sizingMethod='scale' - sizingMethod='crop'...

    *невнимательное*

  4. форум Says:
    September 11th, 2007 at 17:32 Quote

    Самый простой способ решения этой проблемы - вообще не использовать рисунки в формате png !

  5. Cardinal Says:
    January 15th, 2008 at 17:21 Quote

    иногда без них очень плохо

Leave a Reply

code