VPF::Полупрозрачный PNG, jQuery и хренов ИЕ

egoistu

Дата 19.9.2010, 20:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 26
Регистрация: 16.6.2009

Репутация: нет
Всего: нет

Всем привет...
Поделитесь пожалуйсто решением...
Значит вот в чём дело:
Есть небольшой блок с фотками пользователей...
фотка содержится в div-е, при наведение на одну из них срабатывает скрипт jQuery который немного увеличивает фотку (ну немного по другому...)

$("#photoBox").fadeIn("fast");

теперь сама проблемма:
этот самый div в качестве задника использует полупрозрачный PNG
так вот когда скрипт меняет прозрачность всего div-а (в ИНТЕРНЕТ ЕКПЛОРЕРЕ), прозрачная область изображения становится чёрной.
Как это можно исправить чтоб норм всё было?

страница... http://www.marketing.md/users/public

bars80080

Дата 19.9.2010, 22:22 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Цитата(egoistu @ 19.9.2010, 20:59

)

так вот когда скрипт меняет прозрачность всего div-а (в ИНТЕРНЕТ ЕКПЛОРЕРЕ), прозрачная область изображения становится чёрной.
Как это можно исправить чтоб норм всё было?

имхо, никак. хотя могу и ошибаться.
проблема png с IE давно известная. ИЕ6 не поддерживает полупрозрачность png, а ИЕ7 поддерживает. существуют javascript-хаки для решения проблемы в ИЕ6. но и в ИЕ7 есть проблема с полупрозрачностью. это как раз момент анимации, увеличение или затенение. и насколько знаю, то решение для ИЕ6 не работает.
в общем, спасает только то, что обычно в полупрозрачных png фотографии не хранят, а только некоторые специфические рисунки. то есть красивая галерея с модными эффектами по большому счёту не нужна. я тупо забил на этот вопрос. там где у меня было затенение рисунков png, для ИЕ7 сделал простое появление. поэтому советую сделать не плавное увеличение, а просто скачок. исключительно для ИЕ. а для остальных оставить плавность

magelan

Дата 20.9.2010, 00:41 (ссылка)

(нет голосов)

Загрузка ...

потерял xPath

Профиль
Группа: Участник
Сообщений: 393
Регистрация: 5.4.2010

Репутация: 2
Всего: 16

Я использую следующий хак для борьбы с шестым ослом:

Код


<style>
.png { filter:expression(png4ie(this)); } /* for IE IMG png */
.png A { position: relative; } /* for IE background png  */
</style>
<script type="text/javascript">
var uag = window.navigator.userAgent.toLowerCase();
browser = {
    version: (uag.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1]
};
var png4ie = function ( obj )
{
    if( /msie/.test( uag ) && !/opera/.test( uag ) && browser.version <= 7 )
    {
        var src;
        if( obj.tagName == 'IMG' )
        {
            if( /\.png$/.test( obj.src ))
            {
                src = obj.src;
                obj.src = "/media/design/blank.gif";
            }
        }
        else
        {
            src = obj.currentStyle.backgroundImage.match( /url\("(.+\.png)"\)/i );
            if( src )
            {
                src = src[ 1 ];
                obj.runtimeStyle.backgroundImage = "none";
            }
        }
        if( src )
            obj.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    }
}
var swapPng = function ( obj, uri )
{
    var ver = (uag.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1];
    if( /msie/.test( uag ) && !/opera/.test( uag ) && ver <= 7 )
        obj.filters(0).src = uri;
    else
        obj.src = uri;
}
</script>

<img class="png" src... >

<div class="mydiv png"></div>

но надо смотреть, как там функция прозрачность меняет, есть подозрение, что для ие6 прийдется писать свой кусок кода.

Это сообщение отредактировал(а) magelan - 20.9.2010, 00:43

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »