Tomáš Daněk

IE6- neumí zobrazit průhlednost u PNG obrázků. Můžete jej to ovšem naučit :)

Pokud webový prohlížeč neumí zobrazit PNG průhlednost, zobrazí místo ní barvu nastavenou jako barvu pozadí při ukládání obrázku.

Pouze obrázky

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola 
   */
   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
       }
     }
   }

2. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.

Obrázky a obrázkové mapy

1. Z níže uvedeného kódu vytvořte soubor s názvem fix-png-map.js, který umístěte do svého webu např. do adresáře scripts/
   

   /*
     Correctly handle PNG transparency in Win IE 5.5 & 6.
     http://homepage.ntlworld.com/bobosola/imagemap.htm
   */
   var strGif = "scripts/transparentpixel.gif"
   var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"
   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
         if (img.useMap) {  
   	var strAddMap = "<img style=\"position:relative; left:-"
            + 0 + "px; top:" + 0 +"px;" + "height:" + img.height
            + "px;width:" + img.width +"\" " + "src=\"" + strGif
            + "\" usemap=\"" + img.useMap + "\" border=\"" + img.border
            + "\"></span>"
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:"
            + img.height + "px;" + imgStyle + ";" + "filter:"
            + strFilter + "(src=\'" + img.src + "\',
            sizingMethod='scale');\">" 
   	strNewHTML += strAddMap
         }
         else {
   	var strNewHTML = "<span " + imgID + imgClass + imgTitle
           + " style=\"" + "width:" + img.width + "px; height:"
           + img.height + "px;" + imgStyle + ";" + "filter:"
           + strFilter + "(src=\'" + img.src + "\',
           sizingMethod='scale');\"></span>"
         } 
         img.outerHTML = strNewHTML
         i = i-1
       }
     }
     for(i=0; i < document.forms.length; i++)
      findImgInputs(document.forms(i))
   }
   function findImgInputs(oParent) {
     var oChildren = oParent.children
     if (oChildren) {
       for (var i=0; i < oChildren.length; i++) {
         var oChild = oChildren(i)
         if ((oChild.type == 'image') && (oChild.src)) {
   	var origSrc = oChild.src
           oChild.src = strGif
           oChild.style.filter = strFilter + "(src='" + origSrc + "')"
         }
         findImgInputs(oChild)
       }
     }
   }
   

2. Vyptvořte si průhledný obrázek o velikosti 1x1 px ve formátu GIF s názvem např. transparentpixel.gif, který umístěte do svého webu např. do adresáře scripts/. V případě jiného umístění obrázku upravte ve skriptu proměnnou strGif.
3. Do hlavičky stránky vložte níže uvedený kód s odkazem na soubor fix-png.js
   

   <meta http-equiv="content-script-type" content="text/javascript" />
   <!--[if (lte IE 7)&(gte IE 5)]>
     <script defer type="text/javascript" src="scripts/fix-png-map.js">
     </script>
   <![endif]-->

IE5- nepodporuje žádný JavaSript.