Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.12.2011, 00:54
Аспирант
Отправить личное сообщение для mikel Посмотреть профиль Найти все сообщения от mikel
 
Регистрация: 22.11.2009
Сообщений: 30

И снова прозрачность, 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'});
});
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2011, 01:05
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.12.2011, 01:06
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

соответственно картинку spacer.gif добавь куда нить. Что бы крестик не отображался в ИЕ
Ответить с цитированием
  #4 (permalink)  
Старый 12.12.2011, 01:16
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

хотя можно и без 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>
Ответить с цитированием
  #5 (permalink)  
Старый 12.12.2011, 10:08
Аспирант
Отправить личное сообщение для mikel Посмотреть профиль Найти все сообщения от mikel
 
Регистрация: 22.11.2009
Сообщений: 30

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

А можно его как-нибудь скрестить с animate?
Дело в том, что я хочу, чтобы эта иконка плавно появлялась, постепенно увеличивая прозрачность, использую
m1.animate({opacity:'0.9'}, 2000, function() {} );
Ответить с цитированием
  #6 (permalink)  
Старый 12.12.2011, 10:15
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<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>

Последний раз редактировалось devote, 12.12.2011 в 10:56.
Ответить с цитированием
  #7 (permalink)  
Старый 12.12.2011, 10:37
Аспирант
Отправить личное сообщение для mikel Посмотреть профиль Найти все сообщения от mikel
 
Регистрация: 22.11.2009
Сообщений: 30

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

В крайнем случае сделаю проверку на ИЕ7 и буду показывать иконки без анимации.
Ответить с цитированием
  #8 (permalink)  
Старый 12.12.2011, 10:42
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

поставил PNG не вижу разницы
Ответить с цитированием
  #9 (permalink)  
Старый 12.12.2011, 10:50
Аспирант
Отправить личное сообщение для mikel Посмотреть профиль Найти все сообщения от mikel
 
Регистрация: 22.11.2009
Сообщений: 30

Для примера, вот картинка, которую я использую. Как вариант, для ИЕ7 буду подсовывать гифки без тенюшки.
Изображения:
Тип файла: png myimage.png (39.4 Кб, 6 просмотров)

Последний раз редактировалось mikel, 12.12.2011 в 10:53.
Ответить с цитированием
  #10 (permalink)  
Старый 12.12.2011, 10:59
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery height float в IE7 pavelpat jQuery 1 03.08.2011 23:59
Полупрозрачный PNG, jQuery и хренов ИЕ egoistu Javascript под браузер 2 25.09.2010 15:45
png, jquery, прозрачность и ie Дима1234 Библиотеки/Тулкиты/Фреймворки 3 25.12.2009 00:08
прозрачность png в IE6 и jQuery smok jQuery 9 09.12.2009 10:31
Изменение прозрачности png в IE7 basist jQuery 3 12.10.2009 12:51