И снова прозрачность, jquery + ie7+png
Подскажите, плз, возникла проблема:
При изменении прозрачности 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'});
});
|
<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>
|
соответственно картинку spacer.gif добавь куда нить. Что бы крестик не отображался в ИЕ
|
хотя можно и без 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>
|
devote,
Спасибо, решение работает А можно его как-нибудь скрестить с animate? Дело в том, что я хочу, чтобы эта иконка плавно появлялась, постепенно увеличивая прозрачность, использую
m1.animate({opacity:'0.9'}, 2000, function() {} );
|
<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>
|
Я тоже так попробовал, не работает, в процессе анимирования все равно виден черный контур, в примере приведен гифовый логотип, у меня круглые png'шки с полупрозрачной тенюшкой, по тенюшке этот контур и идет.
В крайнем случае сделаю проверку на ИЕ7 и буду показывать иконки без анимации. |
поставил PNG не вижу разницы
|
Вложений: 1
Для примера, вот картинка, которую я использую. Как вариант, для ИЕ7 буду подсовывать гифки без тенюшки.
|
mikel,
Да нормально у меня пашет с вашей картинкой ИЕ7-8 |
| Часовой пояс GMT +3, время: 10:16. |