0 Пользователей и 1 Гость просматривают эту тему.
  • 92 Ответов
  • 71333 Просмотров
*

nike-17

  • Захожу иногда
  • 131
  • 12 / 0
Шаг 1.
Создать файл с назнавием fixpng.js со следущим содержанием и поместить его в корень сайта:
Код:

Код
function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
          var img = document.images[i]
          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
             }
      }
   }
window.attachEvent("onload", correctPNG);

Шаг 2
На своей странице между тэгами <head> </head> добавьте это:
Код:

Код
<!--[if gte IE 5.5000]><script type="text/javascript" src="/fixpng.js"></script><![endif]-->
« Последнее редактирование: 10.02.2008, 13:43:38 от poizon »

А у меня в IE все ок с прозрачным фоном на сайте с png...видемо в последнем IE исправили.
*

nike-17

  • Захожу иногда
  • 131
  • 12 / 0
Речь идет о о старых версиях ИЕ. начиная с 7 версии разработчики наконец то врубили необходимый канал для png24.
Просто в прикрепленной теме был приведен пример не очень удачного решения проблемы - с Ие все становилось нормально, а в опере вообще прекращало отображаться...
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
У меня проблема несколько иного рода.
Если использовать вот css решение в обычном html документе, то все работает правильно, осёл отображает PNG.
Но почему-то при переносе css под шаблон, ни фига не работает - фильтр по просту не срабатывает и вместо изображения получаю пустое место.

Вот исходник:
Код
#logotype {
  float           :left;
  margin-left     :20px;
  margin-top      :15px;
  width           :222px;
  height          :116px;
  background      :url(../images/logotype.png);
  position        :relative;
  }

Я,соответственно, добавляю ниже вот это:
Код
*html #logotype {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/logotype.png', sizingMethod='scale');}

В обычном документе эта конструкция работает, но в шаблоне не хочет. В чем может быть причина?
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
а вообще, по-мому, там надо указывать 1 пиксельный прозрачный гиф
« Последнее редактирование: 21.11.2007, 17:20:56 от poizon »
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Попробовал подставить backgound:url(pix.gif) вместо background:none, результат прежний.

Можете посмотреть вот здесь:
http://polygon.cre-active.eu

Честно говоря, в тупике просто... В тупике от того,что в обычном документе работает, а в шаблоне нет.. Может кто-нибудь выложить любой шаблон (хоть Madeyourweb), в котором будет работать данный CSS приём для правильного отображения PNG-24?
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
на предыдушей странице выкладывали 2 мамбота на яве...
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
У меня приведенный вариант не работает в IE6 (+Service Pack2)
Не могли бы Вы выложить где-нибудь в сети рабочий пример?

Спасибо.
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Скажите, а Ваш пример обрабатывает графику в CSS?

Я ранее пользовался вот таким рабочим примером:

Код
/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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[i]
      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
      }
   }
}

Но его недостаток заключается в том, что данный скрипт валидно обрабатывает только тэг img (к которому нужно еще добавлять class="png"),  а у меня в большинстве случаев выводятся PNG элементы в шаблоне, т.е. через <DIV>.

В Вашем варианте судя по коду происходит еще и onload картинок, что просто замечательно. Очень хотелось бы опробовать рабочий вариант. Ваш пример,который у меня не работает, я положил вот здесь здесь.
Файл с .js примером лежит в одной папке с png.html

Что в примере я сделал не так?

Даем сообществу валидный рабочий код! :)
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
этот пример не работает, если картинка в бэкграунде
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
о... опять валидация... тьху... (сорри за злостный оффтоп)
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
советуете не париться этим фетишом? :)
Поставил ultimatepngfix 2 - заработало! Правда, на валидацию еще не проверял...
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Попробовал  bot_ultimatepngfix_2.0
Отличная штука. Единственное замечание - мамбот почему-то ненамного увеличивает пропорции оригинального изображения. Как с этим бороться?
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Немного поясню предыдущий вопрос: мамбот растягивает именно PNG изображения из CSS стилей.
*

garrymax

  • Новичок
  • 4
  • 0 / 0
Давно писал, вернее  - переделывал, что бы и фон брала:
Код
function fixPNG(element){
  if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)){
    var src;
    if (element.tagName=='IMG'){
      if (/\.png$/.test(element.src)){ src = element.src; element.src = "img/trans.gif"; }
    } else {
      src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
      if (src){ src = src[1]; element.runtimeStyle.backgroundImage="none"; }
    }
    if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
  }
}

А еще есть вот такая штука http://www.joomla-extensions.ru/correctpng.html
В детстве, как и все, я мечтал стать космонавтом, но однажды меня укусил программист...
*

garrymax

  • Новичок
  • 4
  • 0 / 0
Единственное расхождение, которое можно добавит непосредственно в этом вопросе, это "Если логотип можно отобразить 256 цветовой таблице (PNG-8), то ослик поддерживает прозрачный канал, а иначе PNG-24 и функцию фильтр в свойстве класса". Но и это уже где-то в ответах было, хотя и выражено в другой форме.
« Последнее редактирование: 10.02.2008, 15:18:15 от poizon »
В детстве, как и все, я мечтал стать космонавтом, но однажды меня укусил программист...
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
garrymax: как использовать Ваш скрипт? Попробовал вставить таким образом:
Код
<!--[if gte IE 5.5000]>
<!--[if lte IE 7]><script language="JavaScript" type="text/javascript"  src="png.js"></script><![endif]-->

Но что-то скрипт не запускается...
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
я всегда пользуюсь тем, что в аттаче (.js)
Цитировать
А еще есть вот такая штука http://www.joomla-extensions.ru/correctpng.html

В шаблоне (следим за путями к файлу!)
Код
<!-- Исправляем глюк png в осле -->
<!--[if gte IE 5.5000]>
<!--[if lte IE 7]><script language="JavaScript" type="text/javascript"  src="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>/js/correctpng.js"></script><![endif]-->

работает на все 100%
png фиксится только в том случае, если он не бэкграунд!

[вложение удалено Администратором]
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Я ищу работоспособный вариант, проходящий валидацию и работающий с фоновыми изображениями. Из всех предложенных вариантов подошел только мамбот от Joomlaworks, однако как я уже писал выше, он искажает оригинальное изображение, делая его больше. Читал официальный форум разрабочиков, на аналогичные вопросы вразумительного ответа автором так и не было дано...
*

garrymax

  • Новичок
  • 4
  • 0 / 0
garrymax: как использовать Ваш скрипт?

Каюсь - не все выдал - давно это было.

Сначала описываем:
Код
<style>
.png { filter:expression(fixPNG(this)); }
</style>

</script>
  function fixPNG(element){
    if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)){
      var src;
      if (element.tagName=='IMG'){
        if (/\.png$/.test(element.src)){ src = element.src; element.src = "img/trans.gif"; }
      } else {
        src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
        if (src){ src = src[1]; element.runtimeStyle.backgroundImage="none"; }
      }
      if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src +   ,sizingMethod='scale')";
    }
  }
</script>

Еще, к функции нужен файл (там его зовут trans.gif в директории img), который состоит из одной точки прозрачного цвета.


Далее по тексту (по телу) вставляем:
Код
<img src="pic.png" class="png">

<!--  или -->

<div class="png" style="background-image:url(pic.png);"> text</div>

<!--  или даже -->

<td class="png" style="background-image:url(pic.png);"> text</td>

То есть: вставляем в стиль класс png с фильтром-функцией; описываем функцию; указываем функции ГИФовский файл, который весь прозрачный; каждому PNG-24 ставим класс png, или каждому тегу, у которого в бакграунте png стоит - ставим этот же класс png....все.

Реально рабочий пример http://www.haron.net.ru/ss/ (просьба по сайту не лазить - клиенту показываю, как joomla работает) - у окошек бордюр прозрачный и пузыри такие же.
« Последнее редактирование: 11.02.2008, 13:25:55 от garrymax »
В детстве, как и все, я мечтал стать космонавтом, но однажды меня укусил программист...
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Попробовал самое простое решение через CSS и был просто поражен: PNG изображение также немного вытягивается по вертикали!!! Что же это может быть? Выходит, какой-то косяк с самим Explorer'ом... Или я ошибаюсь? У меня IE6 SP2.
См.приложенную картинку.
Забавно, но при использовании Java скрипта (цифра 2) картинка выводится без искажений, а при
использовании CSS растягивается, как на правом примере (3). Вот так...
*

Sulpher

  • Живу я здесь
  • 2028
  • 392 / 15
  • Шаблоны и расширения Joomla
Забыл приаттачить картинку к предыдущему посту...

[вложение удалено Администратором]
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
повоторюсье еще раз.
Если картинка форматом .png вставляется не как как background, то есть java скрипт, который "исправляет" отображение прозрачого фона у формата png-24

http://www.joomla-extensions.ru/correctpng.html - вот ссылка на этот мамбот.

Если pgn "ложится" в background, то тут приходтся использовать http://joomlaforum.ru/index.php/topic,3251.0.html

Дык! gif'ы-то прозрачные работают (на винтеле).

Нужен настрой на IE6 - выкинь png.
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
ну а "настроить" gif куда сложнее, чем привязать хак для png. Лично у меня нет желания попиксельно вырезать гифку. Лучше я потеряю 10кб трафика под пнг, но не буду париться...
*

Full_crazy

  • Захожу иногда
  • 264
  • 48 / 0
  • Иногда думаю ...
Тут на форуме уже пробегала ссылка на интересное решение. Сам не жалую пнг из-за этого, но попробовал - данный вариант хорошо работает в том числе и с фоновыми изображениями. Но проявилась бяка, как обычно - в ие6 отказались работать 2 меню ( стандартные) на странице. Правда, глубоко не копал, поскольку это был эксперимент, но может - кому-то поможет  ^-^
Joomla! = невозможного почти нет!

http://www.artlebedev.ru/tools/technogrette/html/framed/

мне помогло в свое время  ;)
*

mrspm

  • Новичок
  • 7
  • 0 / 0
http://www.ahill-relax.dp.ua/dbn/
почему-то в IE6 вокруг png-рисунков есть белая рамка...
Медведь внизу вообще с надписью.
Причем после того, как загрузил шаблон на сервер.
На локальном компе - все гут.
*

7Rei

  • Захожу иногда
  • 134
  • 20 / 0
Здравствуйте. Мне нужно реализовать фоновые png через css. Использовал этот метод:
.prompt{
   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/prompt.png);
}
В итоге png фон отображаются нормально. Но у меня ни как не получилось применить к нему "background-repeat:repeat-y".
Подскажите пожалуйста, как это можно сделать?
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться