И снова прозрачность, jquery + ie7+png

[mikel]

Подскажите, плз, возникла проблема:
При изменении прозрачности png в IE7 вокруг полупрозрачной png'шки возникает черный контур. Гуглил, большая часть решений относится к IE5.5-6, нагуглил свою проблему
http://stackoverflow.com/questions/1...nt-png-problem

Но что-то приведенные способы не помогают:

<div id="m1"><a href="index.php"><img src="myimage.png"/></a></div>

$(document).ready(function(){
$("#m1").css({opacity:'0.5'});
});

[devote]

<div id="m1"><a href="index.php"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/></a></div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var m1 = $("#m1"),
        im = m1.find("img");
    if ( $.browser.msie ) {
        im.css( { "width": im.width() + "px", "height": im.height() + "px", "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+im.attr('src')+"', sizingMethod='scale')" } ).attr("src", "spacer.gif");
    }
 
    m1.css({opacity:'0.5'});
});
</script>

[devote]

соответственно картинку spacer.gif добавь куда нить. Что бы крестик не отображался в ИЕ

[devote]

хотя можно и без spacer'а обойтись:

<div id="m1"><a href="index.php"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"/></a></div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var m1 = $("#m1"),
        im = m1.find("img");

    if ( $.browser.msie ) {
		im.before( '<div></div>' ).prev().css( { "width": im.width() + "px", "height": im.height() + "px", "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+im.attr('src')+"', sizingMethod='scale')" } ).end().hide();
    }
 
    m1.css({opacity:'0.5'});
});
</script>

[mikel]

devote,
Спасибо, решение работает

А можно его как-нибудь скрестить с animate?
Дело в том, что я хочу, чтобы эта иконка плавно появлялась, постепенно увеличивая прозрачность, использую

m1.animate({opacity:'0.9'}, 2000, function() {} );

[devote]

<style type="text/css">
    #m1 {
        opacity: 0;
        filter: alpha(opacity=0);
    }
</style>
<div id="m1"><a href="index.php"><img src="http://javascript.ru/forum/attachments/library-toolkit-framework/1027d1323672630t-i-snova-prozrachnost-jquery-ie7-png-myimage-png"/></a></div>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var m1 = $("#m1"),
        im = m1.find("img");
 
    if ( $.browser.msie ) {
        im.before( '<div></div>' ).prev().css( { "width": im.width() + "px", "height": im.height() + "px", "filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+im.attr('src')+"', sizingMethod='scale')" } ).end().hide();
    }
  
    m1.mouseover(function(){
        m1.stop().animate({
            opacity: 1
        }, 200 );
    }).mouseout(function(){
        m1.stop().animate({
            opacity: 0
        }, 200 );
    });
});
</script>

[mikel]

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

В крайнем случае сделаю проверку на ИЕ7 и буду показывать иконки без анимации.

[devote]

поставил PNG не вижу разницы

[mikel]

Для примера, вот картинка, которую я использую. Как вариант, для ИЕ7 буду подсовывать гифки без тенюшки.

[devote]

mikel,
Да нормально у меня пашет с вашей картинкой ИЕ7-8