четверг, 16 июня 2011 г.

PNG в IE fadeOut и fadeIn

Суть проблемы: при использовании функции fadeOut/fadeIn для png картинки в IE появляются вокруг картинки черные пятна.

Пример кода:

<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#all").click( function() {
$("#all").fadeOut(1000);
});
});
</script>
</head>
<body>
<img src="images/all.png" id="all" />
</body>
</html>


Очень долго рылся в интернете, но всё же нашел решение. Все пишут про фильтры, но лично у меня сработало только это решение (IE6 / IE7 / IE8 - по IETester)


<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}
$("#all").click( function() {


$("#all").fadeOut(1000);
});
});
</script>
</head>
<body>
<div id="all"><img src="images/all.png" id="all" /></div>
</body>
</html>

Комментариев нет:

Отправить комментарий