Формат .png и IE

252

Sla_Dom

2 мая 2007, 03:06

732

Проблема в следующем. Дизайн сайта сделан так, что необходимо сделать несколько рисунков с прозррачным фоном. Добиться точности передачи цвета и качества графики возможно только при сохранении рисунков в формате .png (gif не дает такой четкости, рисунки довольно сложные).

Все ничего, но в IE он вместо прозрачного фона выдает серый фон. Понятно что такое никуда не годится. Кто с талкивался, возможно, с такой проблемой, и знает как её возможно решить. Все таки еще 70% РУнета ходить через Ослика, потому и приходится с ним соотноситься :) . А он вон что кажет :(

В Opera и Mozilla все отображается отлично, а вот в IE...

Буду благодарен за любые советы, релевантные моему топику :)

KG

123

KindGood

2 мая 2007, 03:48

#1

Делаем следующее:

После <body> добавляем следующий код:


<style type="text/css">

img {behavior: url("/images/pngbehavior.htc");}

</style>

Создаем файл pngbehavior.htc:


<public:component>

<public:attach event="onpropertychange" onevent="propertyChanged()" />

<script>



var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";

var realSrc;

var blankSrc = "/images/blank.gif";



if (supported) fixImage();



function propertyChanged() {

   if (!supported) return;



   var pName = event.propertyName;

   if (pName != "src") return;

   // if not set to blank

   if ( ! new RegExp(blankSrc).test(src))

      fixImage();

};



function fixImage() {

   // get src

   var src = element.src;



   // check for real change

   if (src == realSrc) {

      element.src = blankSrc;

      return;

   }



   if ( ! new RegExp(blankSrc).test(src)) {

      // backup old src

      realSrc = src;

   }



   // test for png

   if ( realSrc && /\.png$/.test( realSrc.toLowerCase() ) ) {

      // set blank image

      element.src = blankSrc;

      // set filter

      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";

   }

   else {

      // remove filter

      element.runtimeStyle.filter = "";

   }

}



</script>

</public:component>

/images/blank.gif - это однопиксельный прозрачный гиф.

Имя этого файла и путь можно изменить, соответственно скорректировать в файле pngbehavior.htc

Все, теперь в IE у .png будет работать прозрачность.

252

Sla_Dom

2 мая 2007, 04:01

#2

Спасибо большое.

Аналогичный ответ уже получил в асю.

Еще раз спасибо за отзывчивость.

252

Sla_Dom

2 мая 2007, 04:06

#3

А аналогичное решение, но для рисунков, устанавливаемых background, есть у кого-нибудь в арсенале?

S

85

saman

2 мая 2007, 04:32

#4

http://tigir.com/alpha_png.htm

полезная статейка по этой теме

С уважением, Хорев Андрей (http://www.khorev.net/)

127

a.fatman

2 мая 2007, 07:39

#5

http://www.google.com/search?q=png+ie

47

Scorpio

2 мая 2007, 07:45

#6

вроде png8 нормально принимает ИЕ, а вот PNG24 не хочет.

Курс биткоина превысил $50 тысяч

Как удалить плохие SEO-ссылки и очистить ссылочную массу сайта