PNG в меню.

Тема в разделе "Пожелания и предложения", создана пользователем olmer2002, 10.03.2008.

  1. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Хотелось бы ввидеть возможность полноценной вставки в меню ( в случае, если используется меню картинками) .png файлов с прозрачностью альфа-канала.

    иными словами использование для пнг фильтра - AlphaImageLoader, ИЕ не умеет правильно отображать полупрозрачные png.

    для всего шаблона фильтр такой у меня применяется(но не работате в меню с картинками),самому для данного меню адаптировать не хватает скилла =(

    для чего это нужно:

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

    во избежании рекламы стороних ресурсов,просто позволю себе привести два метода, изученых мною на эту тему.

    метод 1, javascript
    Код (CODE):
    1. <script type="text/javascript">
    2.  
    3. function fixPNG(element)
    4. {
    5.   //Если браузер IE версии 5.5-6
    6.   if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
    7.   {
    8.     var src;
    9.    
    10.     if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
    11.     {
    12.       if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
    13.       {
    14.         src = element.src;
    15.         element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
    16.       }
    17.     }
    18.     else //иначе, если это не картинка а другой элемент
    19.     {
    20.       //если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
    21.       src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
    22.       if (src)
    23.       {
    24.         src = src[1]; //берем из значения свойства background-шmage только адрес картинки
    25.         element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
    26.       }
    27.     }
    28.     //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
    29.     if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    30.   }
    31. }
    32.  
    33. </script>


    метод два,PHP

    Код (PHP):
    1. <?php
    2. function getPNG($url) {
    3. if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false) {
    4. return " src=\"/images/none.gif\" style=\"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='".$url."')\"";
    5. } else {
    6. return " src=\"".$url."\"";
    7. }
    8. }
    9. ?>


    иными словами задача сводится к тому,чтобы разместить этот код там где нужно,в файле mod_mljoostinamenu.php =))
    я пробовал,но запутался во вхождениях и вызовах функций.

    заранее спасибо за любой ответ.
     
  2.  
  3. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: PNG в меню.

    olmer2002, для этого есть мамботы, выполняющие ф-ии аналогичные. Например, вот этот - http://ext.joom.ru/correctpng.html
    Не знаю, лучший ли, но работает. Правда, обычные пнг, не-24-битные, иногда почему-то растягивает по высоте, иногда margin убирает, как ему захочется..
     
  4. boston
    Offline

    boston Группа локализации

    Регистрация:
    10.10.2005
    Сообщения:
    524
    Симпатии:
    12
    Пол:
    Мужской
    Ответ: PNG в меню.

    Задача специфичная, решать на самом деле лучше мамботом.
     
  5. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Ответ: PNG в меню.

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

    я сам через ксс делал,но вот именно с меню работать не хотело =)

    Добавлено через 3 часа 51 минуту
    мамбот бессилен,как я и предполагал,да и метод у него честно говоря не особо,сначала пнгшки выводятся так как есть,а после только обрабатываются - не етсь гуд,в тех что я приводил выводятся сразу обработанные.
     
    Последнее редактирование: 11.03.2008
  6. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: PNG в меню.

    olmer2002, твой метод №1, в общем, аналогичен действию мамбота, и пихать ф-ю лучше в файл шаблона, имхо. PNG24-изображения можно выводить скрытыми, а уже после обработки показывать с пом. яваскрипта опять же, чтобы не было видно это мерзкой зеленой рамки в IE по началу.

    Ну а метод №2 - поищи хорошенько, где и чего, поиском по файлу, может быть, по каким-нибудь характерным словам или коду меню;)
     
  7. boston
    Offline

    boston Группа локализации

    Регистрация:
    10.10.2005
    Сообщения:
    524
    Симпатии:
    12
    Пол:
    Мужской
    Ответ: PNG в меню.

    Можно в принципе поискать программы которые делают PNG прозрачными для IE.
     
  8. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Ответ: PNG в меню.


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

    там дже картинки вызываюццо методом онмоусовер и обратным,в итоге елси все в шаблоне,то будет каша и меню превратиться в таблицу,ячейки которых НЕ ссылки с бекграундом в виде 1-пиксельного гифа.
    я бы не писал,если бы не споткнулся на этом.
    метод обрабатывает картинки до вывода на экран,мамбот - после,это что-то типо "бехаира" в ксс,извиняюсь за вольный перевод.

    по коду лазал,устал и умер от него =))))


    to boston:

    сложно такую программу представить,просто что она должна с файлом вытворять такое,чтобы ИЕ все хорошо прожевал =)

    ладно,подумаю еще на эту тему,ненавижу ИЕ,самый тупой браузер в мире,вечно извращаться приходится под него =(((
    только вот этот хак,убивает на нет весь стандарт w3c =((
     
  9. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    421
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: PNG в меню.

    Я эту проблему решаю через css c помощью 2-x картинок. Первая картинка в пнж для всех браузеров кроме IE до 6 версии, вторая в гифе с добавлением в css фильтра прозрачности. Правдо это только для картинок с общей прозрачностью, а не с прозрачным фоном.
    А так, просто делаю в гифе и пнж, и для 6-го осла цепляю гиф вместо пнж.
     
  10. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Ответ: PNG в меню.

    я писал выше,что да так можно,и если вы просто вставляете картинку на страницу - то работает все.
    если же нужно вставить ее в меню,по причине того,что подложка меню имеет очень сложную неоднородную текстуру (просто кнопки под нее рисовать замучаешься) то в этом случае не работает.

    поэтому предложил вариант,чтобы сам модуль при нахождении картинги в пнг в своем меню,обрабатывал ее и выдавал уже правильную ссылку при отображении этого самого меню.

    если у вас и меню работает с указанными в качестве картинок пнг файлами,сделайте милость,осветите ваш способ.
     
  11. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    421
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: PNG в меню.

    Год назад я делал подобное, и всё работало, правдо с крахом винта я всё потерял, поэтому код показать щас не могу.

    Я сейчас из стандартного меню делаю своё альтернативное, потому что стандартное имеет много недостатков, поэтому в принципе такую возможность могу прикрепить снова. Единственно не могу обещать что это будет скоро, так как у меня другой работы хватает, поважней меню.
     
  12. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Ответ: PNG в меню.

    что есть стандартное меню и нестрандартное? в джустине,а я говорю именно о ней ( большое спасибо Бостону! ) меню по умолчанию нестандартное.

    ну если нет кода,то не трудитесь,думаю сам найду время и разберу готовый,дабы встроить такую возможность,если иного выхода не будет.
     
  13. Offline

    sergv2005 Пользователь

    Регистрация:
    18.01.2006
    Сообщения:
    421
    Симпатии:
    20
    Пол:
    Мужской
    Ответ: PNG в меню.

    Насчет джостины я пролетел, я думал речь идёт о джумловском стандартном меню.
     
  14. Offline

    Ollegator Недавно здесь

    Регистрация:
    03.02.2008
    Сообщения:
    25
    Симпатии:
    1
    Ответ: PNG в меню.

    В полторашке он не работает, хотя написано, что поддержка есть..
    Имеется ещё неплохой плагин, правда неизвестно что у него опять же с полторашкой :) Ultimate PNG Fix от JoomlaWorks
     
  15. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Ответ: PNG в меню.

    вот этот мамбот сработал,только несколько странно. но что меня удивило,так что он хаком не запарывает валидацию страниц у w3c

    итак как он работает: картинки прозрачными делает,но
    1. роловер сразу выключается
    2. ссылку поймать на картинке сложновато,приходится поводить мышью чуть-чуть,чтобы ссылка обозначилась.

    кстати в самом меню какя-о ошибка,ие6 на джаву ругается,теряет объект какой-то.
     
  16. Cardinal
    Offline

    Cardinal Недавно здесь

    Регистрация:
    19.07.2007
    Сообщения:
    82
    Симпатии:
    1
    Пол:
    Мужской
    Ответ: PNG в меню.

    olmer2002, там не очень много кода, посмотри в консоли FF ,например, чего он хочет. Наверное, имеет смысл его чуть дорабатывать, он же все png ищет, а как правило, изображений png24 не так и много (во всяком случае, я стараюсь их количество сокращать), а в коде мамбота изображения по id получать, чтобы только нужные заменял.

    С ролловерами не пробовал...а со ссылками не помню:)
     
  17. Offline

    olmer2002 Недавно здесь

    Регистрация:
    10.02.2008
    Сообщения:
    18
    Симпатии:
    0
    Ответ: PNG в меню.

    пнг у меня только меню,остальное стараюсь жпегом.

    еи - ступид бровзер.
     

Поделиться этой страницей

Загрузка...