PNG 32 No sale fondo transparente en IE 6

piskui · #1 (**permalink**) 27/09/2008, 04:25

Hola, se que este es un tema bastante debatido y he encontrado varias soluciones, el caso es que no logro que ninguna de ellas me funcione. Las soluciones que encontre son:
Solucion1
Solucion2

El caso es que segun el primer link en mi codigo ASP en la etiqueta IMG SRC meto lo que pone con la ruta de mi imagen y no me sale transparente, os pongo el codigo de mi archivo ASP.

Cita:

<img src="<%=URLRaiz%>images/imagen<%=variable%>.png" style="filter:progid:DXImageTransform.Microsoft.Al phaImageLoader (src='<%=URLRaiz%>images/imagen<%=variable%>.png',sizingMethod='scale');" alt="" />

Hay algun fallo en este codigo? xq no funciona?

Threepwood · #2 (**permalink**) 27/09/2008, 10:32

Hola!

Puedes probar poner esto entre el <head>

Código:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
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 + "\');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

Ya no necesitas usar el filter:Alpha...

Esta es una buena solución aunque no aplica a background-image, para eso si necesitas usar el IEPNGFIX que funciona correctamente. Checa las rutas al archivo htc y al .gif, de todas maneras aqui hay info más detallada.

http://www.twinhelix.com/css/iepngfix/demo/

Salu2

Sam

piskui · #3 (**permalink**) 27/09/2008, 10:51

yo solo lo quiero para imagenes no para fondos asi que tu codigo me valdria, pero no me funciona, lo implemente de la siguiente forma:

Código PHP:

      <%if [gte IE 5.5000] then%>

    <script language="JavaScript" [B]type="text/javascript">[/B]

    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.

    {

    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 + "\');\"></span>"

    img.outerHTML = strNewHTML

    i = i-1

    }

    }

    }

    window.attachEvent("onload", correctPNG);

    </script>

    <%end if %>

lo unico que cambie fue "" que en mi head, me aparecia la funcion como comentario (en verde) y no se cargaba la pagina.
Tambien añadi: "type="text/javascript">".

En el head tengo bastantes scripts javascript eso influye? ay algo mal en el codigo? gracias, un saludo.

piskui · #4 (**permalink**) 27/09/2008, 10:58

por fin funciono, encontre esa misma funcion pero con la cabecera:
<!--[if lt IE 7]> y si lo coje, ya vi que debia ponerlo como comentario, adjunto la funcion que me vale, que es similar a la tuya:

Código PHP:

   <!--[if lt IE 7]>  

 <script language="JavaScript">  

 function correctPNG()  

 {  

   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  

         }  

      }  

   }      

 }  

 window.attachEvent("onload", correctPNG);  

 </script>  

 <![endif]-->

gracias por tu ayuda Threepwood, un saludo compañero!

Threepwood · #5 (**permalink**) 28/09/2008, 10:22

Hola, me alegro que te haya servido.

Samuel.

piskui · #6 (**permalink**) 01/10/2008, 02:21

tengo un nuevo problema al respecto....los botones que son imágenes con fondo transparente no me coje la transparencia. Supongo por que son un "input src" en lugar de un "img src" he probado creando una nueva funcion, similar a la anterior y sustituyendo el image por el input pero no me funciona, como podria hacerlo ? alguna idea? gracias.

piskui · #7 (**permalink**) 01/10/2008, 11:08

nadie sabe si se puede adaptar esa funcion u otra nueva para hacer lo mismo con las imagenes de los input????

kseso? · #8 (**permalink**) 01/10/2008, 14:35

Piskui, en el título dices png 32, creo recordar que a 32 bits dan problemas, para la web es recomendable a 24.

piskui · #9 (**permalink**) 01/10/2008, 16:55

el problema con las imagenes está solucionado, el tema es qe quiero aplicar esa funcion para los input, es decir un boton con una imagen. si es img src funciona pero si es input type="image" no funciona la trasparencia para las imagenes...

piskui · #10 (**permalink**) 02/10/2008, 11:29

nadie me dice si se puede aplicar la funcion a un input type=image??? o como hacerlo?