Jump to content
  • 0

Прозрачность png

okunev2

Asked by okunev2,

 Share

Question

28 answers to this question

Recommended Posts

  • 0
okunev2 Explorer

okunev2

Posted
  • Author
Posted

млин, применил этот фикс для прозрачности png в ИЕ 6: 

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
 for(var i=0; i<document.images.length; i++)
 {
 var img = document.images[i]
 var imgName = img.src.toUpperCase()
 if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
 {
 var imgID = (img.id) ? "id='" + img.id + "' " : ""
 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
 var imgStyle = "display:inline-block;" + img.style.cssText
 if (img.align == "left") imgStyle = "float:left;" + imgStyle
 if (img.align == "right") imgStyle = "float:right;" + imgStyle
 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
 var strNewHTML = "<span " + imgID + imgClass + imgTitle
 + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
 + "(src='" + img.src + "', sizingMethod='scale');"></span>"
 img.outerHTML = strNewHTML
 i = i-1
 }
 }
}

большие картинки png все гуд!

но щас вставил маленькте иконки 11*9px тоже png (домашняя страница, e-mail, карта сайта), они растянулись в ИЕ непонятно как, а в Опере и Мозиле все гуд, может проблема в фиксе?

вот такой косяк с маленькими png, хотя проверил всю верстку и убрал лишние стили, а то думал может поэтому тянется:

5c09774174ef.jpg

Подскажите что делать?

Link to comment
Share on other sites
  • 0
strix Explorer

strix

Posted
Posted

Любой фикс png имеет свои недостатки. Недостаток этого - в том, что в теге img обязательно надо указывать размеры картинки (оба). В общем, указывать размеры картинок полезно и с других точек зрения )))

Link to comment
Share on other sites
  • 0
okunev2 Explorer

okunev2

Posted
  • Author
Posted

Этот метод почему-то не работает, картинки долго грузятся, потом в общем висяк :) плохой это фикс

Пишут, много, в примерах, а конкретики нет, что вот строчка которая прикрепляется к тегу img, это нужно прописать в стилях, а это файл js приатачить!

Link to comment
Share on other sites
  • 0
strix Explorer

strix

Posted
Posted

в комментах к скрипту, который Вы использовали, есть строки:

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Вы не забыли так написать? :) ещ? раз обращаю внимание на атрибут DEFER !

Link to comment
Share on other sites
  • 0
okunev2 Explorer

okunev2

Posted
  • Author
Posted

Исользвал другой метод, он работает, но глюк незначительный, как его побороть не пойму!

Вот короче скрипт iepngfix.htc :

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
 if (filters[f])
 {
 filters[f].enabled = s ? true : false;
 if (s) with (filters[f]) { src = s; sizingMethod = m }
 }
 else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
 // Assume IE7 is OK.
 if (!/MSIE (5.5|6.)/.test(navigator.userAgent) ||
 (event && !/(background|src)/.test(event.propertyName))) return;

 var bgImg = currentStyle.backgroundImage || style.backgroundImage;

 if (tagName == 'IMG')
 {
 if ((/.png$/i).test(src))
 {
 if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
 style.width = offsetWidth + 'px';
 filt(src, 'scale');
 src = blankImg;
 }
 else if (src.indexOf(blankImg) < 0) filt();
 }
 else if (bgImg && bgImg != 'none')
 {
 if (bgImg.match(/^url[("']+(.*.png)[)"']+$/i))
 {
 var s = RegExp.$1;
 if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
 style.width = offsetWidth + 'px';
 style.backgroundImage = 'none';
 filt(s, 'scale');
 // IE link fix.
 for (var n = 0; n < childNodes.length; n++)
 if (childNodes[n].style) childNodes[n].style.position = 'relative';
 }
 else filt();
 }
}

doFix();

</script>
</public:component>

так же есть blank.gif, в css перед тегом img прописываю: * { behavior: url(iepngfix.htc); }

Вот только одно не понятно, когда сайт грузится и соотвественно картинки, то видно как моргает белый фон (ето только в ИЕ) у картинки и потом исчезает, как добиться того чтобы не было такого эфекта? Это не есть гуд!

Link to comment
Share on other sites
  • 0
okunev2 Explorer

okunev2

Posted
  • Author
Posted
в комментах к скрипту, который Вы использовали, есть строки:

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Вы не забыли так написать? :) ещ? раз обращаю внимание на атрибут DEFER !

глюк этого фикса ещ? в том, что нужно обязательно прописывать в теге img в самой странице высоту и ширину картинки!

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept