Html/css, ошибка в IE6

Discussion in 'PHP' started by байкал, 7 May 2008.

  1. байкал

    байкал New Member

    Joined:
    1 Aug 2007
    Messages:
    24
    Likes Received:
    0
    Reputations:
    0
    Мне надо показать прозрачное PNG изображение. Работает во всех браузерах, кроме осла.

    Буду благодарен за любую помощь.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if lt IE 7]>
            <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    </head>
    
    <body bgcolor="white">
    <img src="128_003.png" alt="#########" width="55" height="10" border="0" alt="####" > </img>
    </body>
    </html>
    
    pngfix.js:
    Code:
     
    /*
     
    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++)
       {
          alert("FUNCTION EXECUTING");
    	  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
          }
       }
    }
    
     
    #1 байкал, 7 May 2008
    Last edited: 7 May 2008
  2. Naydav

    Naydav Elder - Старейшина

    Joined:
    30 Dec 2006
    Messages:
    439
    Likes Received:
    63
    Reputations:
    4
    Креативное использование полупрозрачных PNG в веб-дизайне
    Jeff Croft, 23 июня 2007

    Можно попробывать:

    PHP:
    function correctPNG() 
       {
       for(var 
    i=0i<document.images.lengthi++)
          {
          var 
    img document.images[i];
          var 
    imgName img.src.toUpperCase();
          if (
    imgName.substring(imgName.length-3imgName.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.hrefimgStyle "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-1;
             }
          }
       }
     if (
    is_IE<7correctPNG();
     
    #2 Naydav, 7 May 2008
    Last edited: 7 May 2008
  3. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    Всё очень просто!
    IE 7 и выше нормально отображает png, а вот ниже - всё плохо.
    Для коректного отображения png в IE6 и ниже используй сей код в шапке:

    Code:
    <!--[if lt IE 7]>
    	<![if gte IE 5.5]>
    	<script type="text/javascript" src="fixpng.js"></script>
    	<style type="text/css">
    	.iePNG{filter:expression(fixPNG(this));}
    	</style>
    	<![endif]>
    	<![endif]-->
    
    
    файл fixpng.js:
    Code:
    function fixPNG(element) {
    	if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
    		var src;
    		if (element.tagName=='IMG') {
    			if (/\.png$/.test(element.src))
    		{
    		src = element.src;
    		element.src = "img/blank.gif";
    		}
    	}
    	else {
    		src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i)
    		if (src) {
    			src = src[1];
    			element.runtimeStyle.backgroundImage="none";
    		}
    	}		
    	if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
    	}
    }
    
    В папке img должен лежать прозрачный gif blank.gif 1px на 1px

    Далее во всех тегах, которые содержат путь к png пропиши - class="iePNG"

    Всё! ;)
     
    #3 mff, 7 May 2008
    Last edited: 7 May 2008
  4. байкал

    байкал New Member

    Joined:
    1 Aug 2007
    Messages:
    24
    Likes Received:
    0
    Reputations:
    0
    Всё равно не получается. Может у меня PNG как нибудь не так закодирован? Внизу изображение, которое мне надо использовать:
    [​IMG]

    mff: не заметил твой пост, сейчас попробую
     
    #4 байкал, 7 May 2008
    Last edited: 7 May 2008
  5. mff

    mff Elder - Старейшина

    Joined:
    12 Mar 2008
    Messages:
    2,074
    Likes Received:
    701
    Reputations:
    227
    Попробуй, попробуй! 100% рабочий вариант! Вот пример- http://aurveda.info
    Недавно верстал из пингов и без таблиц.

    Там же кстати и gif забери - http://aurveda.info/img/blank.gif
     
    #5 mff, 7 May 2008
    Last edited: 7 May 2008