topleft topright

Главное меню

Главная
Карта сайта
Все статьи
Контакты

Програмирование Joomla

Полезные решения
Joomla API

Программирование

Ajax
Регулярные выражения
CSS
DHTML
RSS
XML

Photoshop

Кисти для Photoshop
Исходники Photoshop
Уроки Photoshop

Наши работы

Сайты на Joomla
Решения на Joomla
Дизайны сайтов

Услуги

Разработка сайтов
Дополнительные услуги
Раскрутка сайтов
 

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

 Печать E-mail
(0 голосов)

Источник: http://tmbu.info

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

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

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

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'е прописать всего лишь одну строчку:

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

 

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

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

 

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

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

 

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

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

 

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

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. *  Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script
  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='/msies(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'а.

 
« Как избежать кеширования CSS   Персональный CSS хак для Internet Explorer 7 »
Вернуться

Ajax

CSS

DHTML


Украинская Баннерная Сеть
PR и тИЦ