Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   прозрачность png в IE6 и jQuery (https://javascript.ru/forum/jquery/6590-prozrachnost-png-v-ie6-i-jquery.html)

smok 07.12.2009 21:15

прозрачность png в IE6 и jQuery
 
поставил скрипт по изменению прозрачности блока при наведении (в блоке бэкграундом стоит картинка png).
для обработки пнг картинки в ие6 использовал jquery.pngfix.js
везде работает нормально, а в ие6 пнг обрабатывается, но не действует fadeTo
Архив с картинкой, html, css и js.
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
</head>
<body>
<div class="sample"></div>
</body>
</html>


Код:

.sample{background-image: url(png.png); position: absolute; height: 173px; width: 173px; top: 73px; left: 20px; }
$(document).ready(function(){
                     $(".sample").fadeTo("fast", 0.3);
                     $(".sample").hover(function(){
                     $(this).fadeTo("fast", 1.0);
                     },function(){
                     $(this).fadeTo("fast", 0.3);
                     });
                     });

subzey 07.12.2009 23:49

И то и другое используют style:filter у элемента. Несколько фильтров накладывать на элемент можно, но, как правило, девелоперы особенно-то об этом и не задумываются.

Попробуйте обернуть картинку в див (спан, если инлайн) и применить fadeTo к нему.

Кстати, знаете ли Вы, что...
...элементу можно задать несколько фильтров IE, несколько классов и значений text-decoration, перечислив их через пробел или другой пробельный символ.

B~Vladi 08.12.2009 00:52

Цитата:

Сообщение от subzey
элементу можно задать несколько фильтров IE, несколько классов и значений text-decoration

О! Про text-decoration я как-то и не знал:)

Urfin 08.12.2009 00:57

text-decoration:underline,:overline,:none,:line-through,:inherit,:blink;

B~Vladi 08.12.2009 09:59

Цитата:

Сообщение от Urfin
text-decoration:underline,:overline,:none,:line-through,:inherit,:blink;

А не так?:
text-decoration: underline overline;

Urfin 08.12.2009 11:17

Цитата:

Сообщение от B~Vladi (Сообщение 37438)
А не так?:
text-decoration: underline overline;

Я просто перечислил через запятую, какие есть варианты.

smok 08.12.2009 19:48

Так дело в том что картинка задана не в html, она задана бэкграунд-имэйджем к блоку [ .sample ]...

<div class="sample"></div>


И нехотелось бы выносить картинку из css

Что вы можете посоветовать? =)

B~Vladi 08.12.2009 21:38

Могу посоветовать нагуглить решение с PNG через файл iepngfix.htc. Может с ним это прокатит, хотя наврятли.

subzey 09.12.2009 00:34

По-прежнему, можете обернуть див в див. У внутреннего останется png, а у внешнего добавляйте прозрачность.

Кстати, в IE у png может пропасть альфа-канал при наложении фильтра "прозрачность". И это касается не только IЕ6.

smok 09.12.2009 10:31

Цитата:

Сообщение от B~Vladi (Сообщение 37503)
Могу посоветовать нагуглить решение с PNG через файл iepngfix.htc. Может с ним это прокатит, хотя наврятли.

пробовал, не работает.

Цитата:

Сообщение от B~Vladi (Сообщение 37513)
По-прежнему, можете обернуть див в див. У внутреннего останется png, а у внешнего добавляйте прозрачность.

тоже пробовал, так же не работает.


Часовой пояс GMT +3, время: 08:16.