Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Полупрозрачный PNG, jQuery и хренов ИЕ


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

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

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

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

Автор: bars80080 19.9.2010, 22:22
Цитата(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
Я использую следующий хак для борьбы с шестым ослом:

Код

<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 прийдется писать свой кусок кода.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)