Форум Сайтостроение Веб-строительство

как сделать png в IE прозрачным?

12 3
MS
На сайте с 26.04.2008
Offline
59
Mac-style
2351

Здравствуйте, вот страничка http://mac-style.ru/test/ в IE смотрится плохо из за пнг, в остальных браузерах все ок. у меня есть сриптик (ниже), но он делает прозрачные просто картинки, а те картинки которые фоном он прозрачными не делает.

Помогите плиз!!! 

var arVersion = navigator.appVersion.split("MSIE")

var version = parseFloat(arVersion[1])



if ((version >= 5.5) && (document.body.filters))

{

   for(var i=0; i<document.images.length; i++)

   {

      var img = document.images

      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

      }

   }

}
[Удален]
#1

есть специальный js специально для ie6, если нужно в личку стукни кину

malls
На сайте с 08.08.2005
Offline
255
malls
#2
Mac-style:
но он делает прозрачные просто картинки, а те картинки которые фоном он прозрачными не делает.

Ну как бы это логично - прозрачность устанавливается не для КАРТИНОК, а для ОБЪЕКТА. Если вы ставите прозрачность для картинки - то прозрачной будет, она, а если картинка в фоне (например DIV-а) то прозрачность надо ставить для DIV-а...

Вобще для разных бразеров прозрачность ставится через: 

	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); /* IE 5.5+*/

	-moz-opacity: 0.80; /* Mozilla 1.6 */

	-khtml-opacity: 0.80; /* Konqueror 3.1, Safari 1.1 */

	opacity: 0.80; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#3

Mac-style, peaktop,

IE не поддерживает прозрачность в PNG.

Есть геморное решение http://www.tigir.com/alpha_png.htm. Но в фоне, кажется, он всеравно ее поддерживать не будет

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)
J
На сайте с 02.02.2009
Offline
53
jumash
#4
T.R.O.N:
Mac-style, peaktop,
IE не поддерживает прозрачность в PNG.
Есть геморное решение http://www.tigir.com/alpha_png.htm. Но в фоне, кажется, он всеравно ее поддерживать не будет

Есть менее гемморное решение

http://www.twinhelix.com/css/iepngfix/

MS
На сайте с 21.07.2008
Offline
216
minSEO
#5

iepngfix поможет.

DK
На сайте с 30.03.2009
Offline
44
Denis_Korablev
#6

непому со скриптом, но знаю что для IE нужно убирать альфо прозрачность, есть утилиты специальные для этого

T.R.O.N
На сайте с 18.05.2004
Offline
314
T.R.O.N
#7
jumash:
Есть менее гемморное решение

в чем же ? Тогда проще просто на сервере перегнать png в gif и все.

PS В чем смысл png? в отличие от gif он просто понимает 24bit, но при этом становится тяжеле jpg.

[Удален]
#8
T.R.O.N:

PS В чем смысл png? в отличие от gif он просто понимает 24bit, но при этом становится тяжеле jpg.

Наклонная линия в пнг становится ломанной лесенкой в гифе. Наши дезы вообще заливают всё вокруг, когда начинаешь использовать gif: "Это же некрасиво и вообще гумно!!!"

J
На сайте с 02.02.2009
Offline
53
jumash
#9
T.R.O.N:
в чем же ? Тогда проще просто на сервере перегнать png в gif и все.

PS В чем смысл png? в отличие от gif он просто понимает 24bit, но при этом становится тяжеле jpg.

This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported.

[Удален]
#10

Давно уже вышел IEPngFix 2, который позволяет обрабатывать прозрачность пингов не только если они в фоне, но даже если они в фоне и с repeat. Версия 1 крашила IE. Найти можно в гугле по запросу IEPngFix 2 или iepngfix.htc (но так и первая версия найдется)

Применяется очень просто. к целевому элементу применяется css свойство

_behavior:url('......./iepngfix.htc');

валидный способ - в <head> страницы

<!--[if lte IE 6]

<style>

object

{

behavior:url('....../iepngfix.htc');

}

</style>

![endif]-->

универсальный способ - прописать в селекторе вместо object все теги где используются изображения, обычно это

div,img,a - особо медленнее не будет.

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

Сам .htc ссылается на файл - прозрачный гиф 1x1 пиксель, по умолчанию имя blank.gif, можно посерчить в исходном коде и исправить на соответствующий файл на вашем хосте.

neolord добавил 31.03.2009 в 19:02

T.R.O.N, сравнить PNG с GIF... вы видимо очень устали сегодня или что-то приняли. =) Никто этого не видел если че.

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий