За последние 24 часа нас посетили 22960 программистов и 1238 роботов. Сейчас ищут 750 программистов ...

"Удобная" прозрачность PNG в IE < 7

Тема в разделе "HTML и CSS", создана пользователем avm, 27 апр 2007.

  1. avm

    avm Активный пользователь

    С нами с:
    21 сен 2006
    Сообщения:
    597
    Симпатии:
    0
    Адрес:
    Москва
    На куче сайтов раскиданы "рецепты" решения проблемы png-прозрачности для IE версий до 7, но как правило их всего 2 - один использование пристегиваемого htc файла, второе - запихнуть картинку в div которому в стиле будет назначен filter alphaimageloader при этом сама картинка делается visibility:hidden.
    Популярный htc скрипт крив (картинки дергаются), а второй метод неудобен тем что нужно держать дополнительный div.

    Совместив все в кучу и выкинув все лишее - в javascript пишем функцию:
    Код (Text):
    1. function transparent(im) {
    2.     if (!im.transparented && (/\.png/.test(im.src))) {
    3.         im.transparented = 1;
    4.         var picture = im.src; var w = im.width; var h = im.height;
    5.         im.src = "/i/s.gif";
    6.         im.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='"+picture+"');";
    7.         im.width = w; im.height = h;
    8.     }
    9.     return "transparent";
    10. }
    а в блоке <style type="text/css"> пишем общее для всех картинок правило:
    Код (Text):
    1. * html img { background:expression(transparent(this)); }
    и все.

    Этот метод позволяет просто писать <img src="aaa.png"> - и эта картинка уже будет с прозрачностью. Особенно эффективно если вы даете посетителям самим вставлять картинки в визуальном редакторе - ну не будут же они в самом деле ставить какие-то DIV'ы вокруг нее!? Метод запускается только в IE <7 (а в других это и не нужно!)

    Дарю.
     
  2. Dagdamor

    Dagdamor Активный пользователь

    С нами с:
    4 фев 2006
    Сообщения:
    2.095
    Симпатии:
    1
    Адрес:
    Барнаул
    avm
    Респект! :)
    Вот бы еще то же самое для вложенных полупрозрачных бэкграундов...
     
  3. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.902
    Симпатии:
    969
    avm это решение для включенного JS?
     
  4. avm

    avm Активный пользователь

    С нами с:
    21 сен 2006
    Сообщения:
    597
    Симпатии:
    0
    Адрес:
    Москва
    Ganzal, да.
     
  5. Ігор

    Ігор Активный пользователь

    С нами с:
    7 апр 2008
    Сообщения:
    195
    Симпатии:
    0
    А не существует никакого другого способа заставить правильно отображаться png с плупрозрачностью?
    В опере все четко.
     
  6. Insanoff

    Insanoff Активный пользователь

    С нами с:
    28 янв 2009
    Сообщения:
    16
    Симпатии:
    0
    Адрес:
    Гах
    ну ты гений!!! :shock:
     
  7. Laroux

    Laroux Активный пользователь

    С нами с:
    28 май 2006
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Краснодар
    1. Забыто сказать про файлик - прозрачный s.gif, лежащий в папке i
    2. + если прелоадить png и затем его подменять через onmouseover и т.п., то сначала загружается все красиво. Затем при наведении нормально подменяется на другой png и вот после все становится плохо - никакй прозрачности и в помине нет...
     
  8. ShamahN

    ShamahN Активный пользователь

    С нами с:
    10 апр 2007
    Сообщения:
    1.449
    Симпатии:
    0
    Адрес:
    г.Волгодонск Роствской обл.
    Я груб к пользователям ие<7. Плевать как у них выглядит. :) В ТЗ сразу описывается, что проект разрабатывается под бровзеры: ie7, и пр. От того, что юзер не увидит красивую картинку - он не сильно потеряет.
    Тем более пользователей 6ого ие совсем мало, а те кто им пользуется, в основном понимают с чем связана подобная кривизна :)
     
  9. EvelRus

    EvelRus Активный пользователь

    С нами с:
    16 ноя 2006
    Сообщения:
    2.168
    Симпатии:
    0
    Адрес:
    Москва
    Имхо в мемориз!
    По поводу ИЕ... люди, не забывайте, что многие чайники, пользуются тем, что дают... а это ИЕ!!! Не надо посылать людей, которые не виноваты в кривости разработчиков ИЕ, далеко и на долго... Они тоже люди!
     
  10. ShamahN

    ShamahN Активный пользователь

    С нами с:
    10 апр 2007
    Сообщения:
    1.449
    Симпатии:
    0
    Адрес:
    г.Волгодонск Роствской обл.
    Nemo
    хватит с них того, что верстаю и функционал подтачиваю по них :) а пнг - пусть устанавливают ие7, благо он бесплатный
     
  11. Kreker

    Kreker Старожил

    С нами с:
    8 апр 2007
    Сообщения:
    5.433
    Симпатии:
    0
  12. Laroux

    Laroux Активный пользователь

    С нами с:
    28 май 2006
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Краснодар
    ShamahN, при всем уважении ты прав лишь частично:
    - грубость - твое личное дело;
    - хорошо, что есть ТЗ, в которм про это написано.

    А вот во всем остальном:
    - юзер не потеряет. Потеряет владелец сайта. Ибо юзер запросто может потом не вернуться;
    - и как раз Nemo прав на все 1000%!
    и как бы не хотелось, но это еще некоторое время будет именно так и ни иначе. И при этом нифига они не понимают, откуда эта кривизна.

    P.S. Основная моя деятельность - техподдержка онлайн системы обмена данными между пользователями. Работает в браузере (никаких надстроек и клиентов). Так вот могу тебе сказать, что юзверей с IE7 и выше или отличным от IE6 браузером (типа оперы, файерфокса, хрома и т.д.) процентов 10. Ну может быть 15 с натягом.
    85% юзеров идут лесом хочешь сказать?

    P.P.S. Ни в коем случае не воспринимай мое сообщение как нечто личное. Все равно во всем виноваты ни мы с тобой, а дядька Билл, точнее его детище... :)
     
  13. ShamahN

    ShamahN Активный пользователь

    С нами с:
    10 апр 2007
    Сообщения:
    1.449
    Симпатии:
    0
    Адрес:
    г.Волгодонск Роствской обл.
    Все это прекрасно понятно. Но...
    И У меня немного другие показатели :) 35% процентов пользователей пользуется ie6. И могу Вас заверить, если информация клиента заинтересовала, - никуда он с сайта не денется, пусть там вообще ни одной картинки не будет :)
     
  14. Laroux

    Laroux Активный пользователь

    С нами с:
    28 май 2006
    Сообщения:
    51
    Симпатии:
    0
    Адрес:
    Краснодар
    Повезло тебе с контингентом. Мои бабушки-бухи уж точно не въезжают что такое png. Да что там png - слово "браузер" ваще вводит в состояние аффекта и на вопрос "У Вас есть системный администратор?" они в ответ спрашивают "А где посмотреть?"

    Насчет картинок в веб - это да. Это вообще отдельный вопрос, о котором можно рассуждать и рассуждать вечно.