PNG con transparencia alpha (PNG32) en internet explorer

Por Ed el 15 de Abril de 2006

¿Podrías poner un ejemplo mas completo?, como cuando y como usarlo, etc.

Como un <img src="" /> que use tu tecnica o algo similar.

Por NEO_JP el 15 de Abril de 2006

Hablando de Fondos (backgrounds) con CSS.
Si a esto lo agregamos dentro de un Condicional de IE, eso quedaria muy bien. Y seguiria siendo estándar.
Recuerden que se debe cambiar "imagen.png" por la ruta de su imagen que usan.

Por gabovanlugo el 15 de Abril de 2006

Se podría implementar de alguna manera para los que utilizan png en su avatar dentro del foro?

Por Ed el 16 de Abril de 2006

glsmaster :

Se podría implementar de alguna manera para los que utilizan png en su avatar dentro del foro?

Ya esta implementado para los avatares

Por Alan el 16 de Abril de 2006

Ed :

¿Podrías poner un ejemplo mas completo?, como cuando y como usarlo, etc.

Como un <img src="" /> que use tu tecnica o algo similar.

Ok

Código :

<img src="imagen.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='imagen.png',sizingMethod='scale');" alt="" />

Donde cambiamos imagen.png por la url de tu imagen.

Por Drakedalfa el 16 de Abril de 2006

¿Pero esto hasta cierto punto no es malo? digo con "trucos" como este IE o mejor dicho sus desarrolladores no se preocupan por mejorar el codigo ya que (quizas) ni se dan cuenta.

Aunque tambien queda de manifiesto que el navegador si puede hacer ciertas cosas y quizas sea mas que por razones tecnicas por razones politicas de Hasecorp.

Pero tambien para un Desarrollador de paginas es un alivio ya que podra usar pngs y que se ven decentes aunque al costo que no sera validada la pagina.

Por Alan el 16 de Abril de 2006

DrakeDalfa_blog :

...tambien para un Desarrollador de paginas es un alivio ya que podra usar pngs y que se ven decentes aunque al costo que no sera validada la pagina.

Pero como ya dijeron, ponerlo en un condicional de ie es la manera de hacerlo

Por eporroa el 16 de Abril de 2006

Si, todo bien, muy bonito... pero han probado con transparencias en PNG-32 bits?... al parecer IE solo soporta (con esta regla) hasta PNG-24

Aun no he encontrado una respuesta a esta pregunta ...

Salu2

Por Freddie el 16 de Abril de 2006

Buenas tardes caballeros, bienvenidos a la clase

"Demagogia y los problemas de la ceguera social"

La catedra sera impartida por mi, Freddie®. Aqui tenemos nuestro primer sujeto de estudio

Xroa© :

Si, todo bien, muy bonito... pero han probado con transparencias en PNG-32 bits?

En este caso vemos como el sujeto, que se hace llamar Xroa©, sin tener NPI de lo que habla y sin haber probado (O leido) el artículo, juzga sin hechos que la solución no sirve para PNG32 cuando la solución precisamente es para PNG32, esto, queridos estudiantes, es un ejemplo de porque gente como ellos:

Llegan al poder (en especial el de la mitad).

Asi, jovenes, en sus carreras profesionales por favor, no imiten estos casos y alejense a por lo menos 10 metros de individuos con estos problemas. Es por el bien de la humanidad.

Por NEO_JP el 16 de Abril de 2006

Ya lo dijiste

Por Alan el 16 de Abril de 2006

Un ejemplo en vivo puede ser encontrado en mi sitio

Por eporroa el 17 de Abril de 2006

Disculpen por el comentario que deje, la verdad no me ha funcionado en Imagenes en formato PNG-32 bits, en todo caso es algo que yo estoy haciendo mal

.. solo me ha funcionado con imagenes PNG de 24 bits, aunque llega a funcionar en gran parte pero toma un comportamiento de una imagen GIF (Se ve como un GIF)... Solo era para una prueba que estaba haciendo así que no hay problema...

...

Pero con otras imagenes si han saldio muy bien, eso es lo que cuenta verdad?

Salu2

PD: Freddie® no me parezco a ninguno de ellos (y mucho menos al del medio) :lol:

PD2: Si lo lei, lo re-lei, lo probe antes y después de ver el tip pero no me funciono

PD3: Take it easy ... solo lo comente con un tono sarcástico, como por aqui se hace verdad?

Por daat_lod el 17 de Abril de 2006

Buenas, como digo siempre, porque le buscan tantas vueltas a las cosas, si por css funciona y muy bien , pero imaginese ponercelo a mas de 30 imagenes, que despelote, por eso es que toda una vida es mejor el javascript viendo las cosas pues les regalo un codigo todo bonito que vi por hay

Código :

<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   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]-->

Por NEO_JP el 17 de Abril de 2006

Exacto Daat_lod, lo mejor es usar un Javascript como el que se usa en Cristalab, y luego es solo cuestión de agregarle el condicional IE solo para navegadores debajo de IE7.

Por GersonM el 17 de Abril de 2006

Esperen un momento que es una condicional, como hago eso :lol:

Por Aoyama el 17 de Abril de 2006

Freddie® :

Asi, jovenes, en sus carreras profesionales por favor, no imiten estos casos y alejense a por lo menos 10 metros de individuos con estos problemas. Es por el bien de la humanidad.

"Eso" ya se lo mande yo a Freddie hace tiempo como tutorial... pero veo que sigué empolvandose como las telarañas dentro de mi cartera...

aquí teneís lo que le envie... con ejemplos y todo...

Aoyama :

Uso de PNG's transparentes en IE

Uno de los problemas a los que nos enfrentamos los desarrolladores y diseñadores web a la hora de hacer nuestra aplicación compatible, es el escaso soporte de Internet Explorer al formato png transparente, y aunque IE7 traerá una semi-impletación de esto, tampoco podemos fiarnos mucho de ello, para resolver este problema, hemos de recurrir a unos cuantos hacks que a continuación veremos.

Colocar imágenes, el tag IMG

Lo primero que debemos hacer, es obviamente detectar el navegador que estamos usando, para ello usaremos un poco de javascript, veamos algo de código:

Código :

 <title>Cualquier título </title>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<![endif]-->

Observa que detectamos con , por obvias razones, este código nunca se ejecutará en un navegador diferente. Analicemos ahora el contenido del archivo javascript.

Código :

var detectada = navigator.appVersion.split("MSIE") //Primero detectamos que se trata de IE en realidad
var version = parseFloat(detectada[1]) //Luego obtenemos el número de versión

if ((version >= 5.5) && (document.body.filters)) //Preguntamos por la versión 5.5 o superior o si existe el elemento filters
{
    for(var i=0; i<document.images.length; i++) // Analizamos todas las imágenes del documento
    {
       var img = document.images[i]; //Tomamos el nombre de la imagen actual en el ciclo
       var imgName = img.src.toLowerCase(); //convertimos a mínusculas
      if (imgName.substring(imgName.length-3, imgName.length) == "png") //detectamos la extensión
      {
          var strHTML = "<span " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"   + ";" + // creamos un span con las medidas de la imagen actual
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" //filter es un elemento único de IE, usamos el objeto AlphaImageLoader de la colección DXImageTransform, pasando como fuente del filtro, la misma imagen y escalamos la imagen con sizingMethod
img.outerHTML = strHTML //Luego obligamos a la imagen a cargar este código en forma de variable
      }
    }
}

Con eso, ya podemos colocar cualquier imagen png en nuestras desarrollos.

Imágenes como fondo

El anterior código, funciona muy bien para poner imágenes, pero no para colocar fondos, en realidad colocar fondos es aún más sencillo, necesitaremos crear dos archivos css, una para IE y otro para el resto, por lo tanto debemos modificar un poco el código de detección de IE:

Código :

<link href="estilo.css" rel="stylesheet" type="text/css" />
<title>Cualquier título </title>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="png.js"></script>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

He llamado al archivo ie.css, puedes llamarlo como deseés, este archivo sólo se cargará si se detecta IE como navegador. Pongamos primero el código normal para poner una imagen de fondo en un div que está dentro del archivo estilo.css

Código :

#header
{
  width: 600px;
  height: 178px;
  background-image:url(fondo.png);
  background-repeat:no-repeat;
  margin-left: 200px;
}

Nada nuevo hasta ahí, ahora veamos mismo código pero dentro del archivo ie.css

Código :

#header
{
  width: 600px;
  height: 178px;
  background: none; /* Aquí quitamos cualquier fondo existente */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="fondo.png", sizingMethod="image"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el  método de escala será ahora image, es decir, la misma imagen */
  background-repeat:no-repeat;
  margin-left: 200px;
}

Hecho esto, ya podemos poner nuestra fondo donde queramos. Como nota final, si están usando Windows XP SP2, quizá deban autorizar la ejecución del hack en su navegador. Cualquier pregunta, dirigirse a los foros.

Ver Ejemplo sin el hack (abrir en IE por supuesto)

Ver ejemplo con el hack (abrir en IE por supuesto)

Por La100rra el 17 de Abril de 2006

Excelente el ejemplo con codigo y todo.

(y)

Por Jack Royce el 17 de Abril de 2006

Oigan eso es injusto falto mi foto dentro de esos 3 q ahora somos 4. :lol:

"Los 4 Jinetes del Apocalipsis"

Por Freddie el 17 de Abril de 2006

Aoyama :

"Eso" ya se lo mande yo a Freddie hace tiempo como tutorial... pero veo que sigué empolvandose como las telarañas dentro de mi cartera...

aquí teneís lo que le envie... con ejemplos y todo...

Juro por la100rra que jamas lo recibí y que probablemente mi spamassasin se lo trago!

Por Sanwar el 18 de Abril de 2006

IE 7 no soporta las transparencias de los PNG?
No era esta una de las "novedades" de IE7?

Por Alan el 18 de Abril de 2006

Sanwar_blog :

IE 7 no soporta las transparencias de los PNG?
No era esta una de las "novedades" de IE7?

IE 7 si las soporta, IE 6- no

Por Lu el 18 de Abril de 2006

Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.

Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.

Por Tronzo el 20 de Abril de 2006

Dios que triste que los propios usuarios tengan que sacarse las castañas del fuego para conseguir algo tan obvio. Estos de Microsoft pensando en virguerias y no son capaces de ofrecer un "triste" navegador en condiciones. Por supuesto yo uso Mozilla Firefox. No soy un fanático antiMicrosoft pero hay ciertas cosas que...

Por Ramm el 20 de Abril de 2006

Lu_blog :

Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.

Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.

O sea que yo no hago sites profesionales?

PD: si, que problema lo del W3C, horrible.

Por Maikel el 20 de Abril de 2006

Lu_blog :

Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.

Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.

* SIGHS *

Por Alan el 20 de Abril de 2006

Tronzo_blog :

Dios que triste que los propios usuarios tengan que sacarse las castañas del fuego para conseguir algo tan obvio. Estos de Microsoft pensando en virguerias y no son capaces de ofrecer un "triste" navegador en condiciones. Por supuesto yo uso Mozilla Firefox. No soy un fanático antiMicrosoft pero hay ciertas cosas que...

Sigh, ya dijeron que en una condicional ya no da problemas con la validacion... :roll:

Por Aoyama el 20 de Abril de 2006

ramm :

Lu_blog :

Está excelente ignoraba que se podía hacer eso, yo que tengo el IE7 me funcinó todo bien, obvio nunca voy a poder usar esos scripts porque me dedico a hacer sites porfesionales, ya saben por el problema del W3C.

Pero a todos los que hacen páginas, blogs etc, les va a funcionar muy bien.

O sea que yo no hago sites profesionales?

PD: si, que problema lo del W3C, horrible.

Si si... muy lamentable eso del W3C ... U_U

...

... deberían enviarles unos :ruso:

...

Por erdanblo el 21 de Abril de 2006

Para fondos no vale

Por Freddie el 22 de Abril de 2006

erdanblo_blog :

Para fondos no vale

Claro que sí. Es solo que no tuviste suficiente creatividad para implementar la solución

Por NEO_JP el 22 de Abril de 2006

NOTA MUY IMPORTANTE NUMERO UNO:
ESTO ES UN ESTILO DE CSS, LOS CSS PUEDEN SER INTRODUCIDOS EN LINEA (DENTRO DE LA ETIQUETA IMG) O UN ARCHIVOS CSS EXTERNO. POR LO TANTO, SE PUEDE USAR CON "BAKGRAUNDZ" (BACKGROUNDS).

NOTA MUY IMPORTANTE NUMERO DOS:
ESTO SOLO ES NECESARIO PARA INTERNET EXPLORER, POR LO TANTO PUEDE SER INTRODUCIDO MEDIANTE UN CONDICIONAL DE IE MENOR A IE7 Y FUNCIONARÁ SIN PROBLEMAS (PARA VER MÁS, MUEVA EL SCROLL HACIA ARRIBA).

PD: Y si, en mayúsculas y rojo para que lo lean.

Por Aoyama el 22 de Abril de 2006

erdanblo_blog :

Para fondos no vale

Supondré que como siempre... no leíste para nada el tutorial que les pusé, ¿verdad? ...

... léelo ... y prueba...

Por Gunther el 26 de Abril de 2006

Como se hace en el caso de que la imagen png tenga unos valores de posicion en el CSS. Por ejemplo:

#header {
padding: 12px 11px 11px 46px;
float: left;
background: transparent url(website.png) no-repeat 10px 5px;
margin-left: 4px;
}

Si ponemos el CSS para ie, siguiendo el ejemplo para backgrounds transparentes que nos puso "Aoyama" nos queda el IE.css de esta manera:

#header {
padding: 12px 11px 11px 46px;
float: left;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="img/website.png", sizingMethod="crop");
margin-left: 4px;
}
Y efectivamente nos hace la transparencia pero los valores de posicion no-repeat 10px 5px de la imagen de fondo se pierden...

¿Existe alguna manera de que esto no ocurra?

Gracias

Por NEO_JP el 26 de Abril de 2006

Yo lo haria asi

CSS general

Código :

#header {
  margin-left: 4px;
  padding: 12px 11px 11px 46px;
  float: left;
  background: transparent url(website.png) 10px 5px no-repeat;
}

CSS para IE only

Código :

#header {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='website.png', sizingMethod='image');
}

Por Aoyama el 26 de Abril de 2006

Gunther ya te habia mencionado que el sizing Method="crop" no te iba a funcionar... puedes usar scale o image en su lugar....

Por ReynierPM el 15 de Mayo de 2006

Pues miren por más que sigo los paso a mi en IE 6.0 con WinXP SP2 no me quiere funcionar. Alguna idea de que pueda ser? Miren el código Javascript:
[code]
var detectada = navigator.appVersion.split("MSIE")
var version = parseFloat(detectada[1])

if ((version >= 5.5)

Por Sue el 19 de Mayo de 2006

Yo he introducido el condicional de IE tal y como Aoyama recomienda, y me funciona bien, pero en cuanto meto otros javascript, al tener el atributo "defer", no me deja visualizar el resto de javascripts. He intentado quitar el "defer" pero entonces, no visualiza la transparencia de los png. ¿Qué puedo hacer?

Por Aoyama el 19 de Mayo de 2006

No deberías tener mucho problema, de cualquier forma aquí tienes una explicación más detallada del atributo defer para que revises bien... una solución rápida es que cargues lo demás en otro archivo javascript sin defer...

Por joseluis el 13 de Junio de 2006

por que no crear una ventana donde se pueda cambiar a formato png una imagen gratis seria bueno

Por Querube el 24 de Junio de 2006

hola muchachos,
he probado esto del maldito truco del png para Internet Explorer, bueno, tu problema se debe a lo mejor porque el bloque donde quieres colocar el fondo png no está definido en largo y ancho, es por eso que no muestra el fondo png, tienes que definirle un ancho y largo para que te funcione, si es un png que ocupa todo el tamaño del bloque (un div, un H, un p etc etc), puedes poner 'image', si pones 'sacale' y el png es más chico, se estirará, sí te va a funcionar el 'crop' si la imagen es más pequeña que el tamaño del bloque, si el bloque tiene tamaño variable, ponle un porcentaje de ancho.

Suerte

Por ryuz el 29 de Junio de 2006

Hola

Tengo un preblema con lo de la transparencia

He hecho todo lo que Aoyama decía y aún así no me sale. :crap:

Si alguien me puede solucionar el problema le estaría muy agradecido.

Por Johnny el 29 de Junio de 2006

ramm :

O sea que yo no hago sites profesionales?

ha dicho porfesionales ramm, "porfesionales"
Me encanta cómo suena...

Por Querube el 29 de Junio de 2006

hola MP
yo uso este código en el archivo js

Código :

function correctPNG() 
   {
   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);

y me funciona muy bien

suerte

Por dugalman el 04 de Julio de 2006

tengo un problema con los fondos png cuando hago el parche para ie, los uso en un formulario. especificamente no funcionan los input, ni los botones
probe camviando el z-index pero no funciono

este es el codigo

Código :

<!--[if IE]><style  type="text/css">
.contenedorData{
   width: 100%;
   height: 100%;
   background: none; /* Aquí quitamos cualquier fondo existente */
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src="styles/fondotrans.png", sizingMethod="crop"); /*cargamos la imagen igual que como lo hicimos con la etiqueta img, pero el  método de escala será ahora image, es decir, la misma imagen */
  background-repeat:repeat;

}</style>
....
....
  <td class="contenedorData">
  <form action="email.php" method="post" name="contacto" target="_blank"  class="recuadrocontacto" id="contacto">
     <table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
       <tr> 
          <td class="recuadrocontactoform">Nombre</td>
              <td><input name="nombre" type="text" id="nombre" size="70"></td>
            </tr>
            <tr> 
              <td class="recuadrocontactoform">E-mail</td>
              <td><input name="email" type="text" id="email" size="70"></td>
            </tr>
            <tr> 
              <td class="recuadrocontactoform">Comentario</td>
              <td><textarea name="comentario" cols="53" rows="2" id="comentario"></textarea></td>
            </tr>
            <tr> 
              <td colspan="2" align="center"><input type="submit" name="Submit" value="Enviar">

Por Querube el 05 de Julio de 2006

hola dugalman_blog

pues en esta dirección espero que encuentres la solución:

http://www.tripix.net/?p=36

Por dugalman el 06 de Julio de 2006

Agradesco el dato querube_blog, sirvio el parche para BUGEXPLORER.

Por Aoyama el 08 de Julio de 2006

Bien he de decirles otra vez que el sizingMethod debe ser scale, image o fit... cualquier otro método da malos resultados... no usen crop ni nada parecido...

Por Querube el 08 de Julio de 2006

estimado Aoyama,

yo he usado el crop para los casos en que el png sobrepasa el tamaño de la caja y me ha funcionado perfecto: www.muchik.com/svq

Cabe mencionar yo uso, por ejemplo, image para mostrar la imagen png completa, fit para ajustarla y crop para recortarla, en ningún caso acepta repeat como atributo en CSS

Por walvaRo el 11 de Julio de 2006

a ver, pero porq no usais un archivo css externo?...

Yo implemento el filtro en un css con clases, para fondos o bordes de tablas, etc.. y luego con hacer la llamada listo..

Por el 11 de Julio de 2006

yo uso un CSS externo siempre :wink:

Por Mi el 12 de Julio de 2006

Yo tengo un problema al alinear los fondos dentro de las tablas o de las columas de las tablas ya que en cualquier caso de todos los ya mencionados me aparece siempre alineado a la izquierda y arriva y yo necesito alinearlo a la derecha y en medio, como ven si me pueden ayudar??

Por JAMEK el 04 de Agosto de 2006

A ver... ¿Nadie se ha dado cuenta de que el truco del fondo png en css funciona bien visualmente pero deshabilita las funciones principales del cursor? (en Ie claro)

Pues fijaos bien, si se pone un texto en una tabla o div con la el estilo o id del fondo png aplicado el cursor no cambia al pasarlo por encima del texto, lo mismo pasa con los enlaces de texto o de imagen.

Para corregirlo se debe incluir en el css condicional para ie, esto:

a { cursor: pointer; }

Al menos se corrige el error para los enlaces.

Por JAMEK el 04 de Agosto de 2006

a { cursor: pointer; }

Al menos se corrige el error para los enlaces(de texto).

No he conseguido reparar el cursor (seleccion de texto) para cuando lo situas encima del texto, ni las imagenes con enlace en teoria con esto bastaria:

text { cursor:text; }
img a { cursor: pointer;)

Pero no funciona.

De todas maneras esto seria una manera socorrida y chapucera de arreglarlo.

En resumen; si quieres usar tranparencias para fondo de texto, texto con enlaces o imagenes con enlaces y que funcione todo en ie mejor... busca otra alternativa porque este sistema interfiere en la navegabilidad del usuario.

Por JAMEK el 04 de Agosto de 2006

P.D. De todas maneras es un buen truco.

Por freak el 07 de Agosto de 2006

El js que puso Querube es una buena alternativa y no hace falta lo de 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader' en el css simplemente se asigna la imagen png como background y se corrige el error en el ie automáticamente.

Por Alan el 26 de Agosto de 2006

freak_blog :

El js que puso Querube es una buena alternativa y no hace falta lo de 'filter: progid:DXImageTransform.Microsoft.AlphaImageLoader' en el css simplemente se asigna la imagen png como background y se corrige el error en el ie automáticamente.

o rly? ¿Tienes un ejemplo?

Por gabovanlugo el 24 de Septiembre de 2006

Hola... alguien ha tenido problemas al momento de aplicar 'maps' usando el fixPNG ?

Al momento de aplicar una href por mapping a un png que es tratado por el .js este se me es desahabilitado...

Por Inyaka el 09 de Octubre de 2006

estoy feliz

por fin me resulto solucionar el problema, en este blog tambien se trato el problema http://www.csslab.cl/?p=65 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS.
digamos que le asigno la clase "titular" a una tabla donde pondre titulares y preciso darle un fondo transparente, entonces:

Código :

 .titular1{
   background-image: url(ruta/fondo.png) !important;
   background-image: none;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='ruta/fondo.png', sizingMethod='scale');
   background: repeat-y;/*o lo que se te venga en gana */   
}

** inyaka mira su cama mullida, comoda y ve de que es tiempo de dormir

Por Inyaka el 09 de Octubre de 2006

en el link se explica muy bien para que sirve !important , basicamente le dice a nuestro bienamado FF que no tome en cuenta la ensalada de tonteras que le damos a nuestr bienodiado IE

Por Thor el 17 de Octubre de 2006

Hola a todos, aunque no encontre una forma para resolver el problema de los vinculos, botones y demás usando la transparencia para IE, lo que hice fue aplicar el parche solo a las zonas donde era necesario, por ejemplo, para el caso de un menu donde me interesaban solo los bordes con transparencia (sombra), aplique el parche solo a esas partes, donde se ubican mis botones/vinculos, es un fondo normal...

Saludos
(espero que se de utilidad)

Por ecosonoro el 01 de Noviembre de 2006

Hola buenas noches o dias.. ya hasta perdi el sentido del tiempo sentado en mi pc..

Bueno mi problema es el siguiente... he logrado hacer las transparencias png de cualquier formato de compresion.. con eso no hay problemas.. ahora, cuando intento utilizar un layer (capa) que me permita mover libremente la imagen por la pantalla, esta no pierde el beneficio de la tranparencia, pero si pierde la movibilidad.. creo que esta funcion se llama drag.. o algo asi.. con "firefox" no tengo este problema.. Agradezco a quien pueda ayudarme.. Saludos.

Por el 13 de Noviembre de 2006

Alguna alma caritativa que me indique si puedo utilizar pngs en las etiquetas body o html?

El objetivo es que el ond tiene una transparencia, la cual esta encima del color del background asi doy una mayor facilidad para cambiar mi diseño, en el siguiente grafico explico un poco mas en detalle:

-> PNG (con transparencia)
-> background (con color)

Entonces la idea es que

-> <body> PNG (con transparencia y se debe repetir por toda la pantalla)
-> <html> background(el color cambia cada vez que yo quiera)

puedo hacer esto????????? en internet explorer o alguna solucion alternativa????

Por excavadora el 02 de Enero de 2007

Graciaaasss INYAKA!!!! despues de dias de partirme el coco al fin arreglaste mi problema con dos lineas de codigo, jajaja, que bueno que compartiste el truco, ahora yo tambien soy feliz

Por madman el 12 de Enero de 2007

el javascript de daat_lod funciona perfecto!

IE6 WinXPSP2

Por Jorge el 17 de Enero de 2007

Yo voy por el mismo sentido, tengo una web realizada completamente con png transparentes, trabajando con capas, y además con imagenes de sustitución. Como meto todo esto en una batidora y se me vea bien en explorer por debajo de 7.

Por Daniel Rodríguez el 22 de Enero de 2007

¿ Qué significa esa intromisión política de ese tal Fredie en el medio de este tema ?
Ya guardé la página y voy a estudiar como implementar el tema. Siempre leí que PNG tenía transparencia variable y acá queda claro como abordar su experimentación.

Por Jesus el 23 de Enero de 2007

Yo tengo el siguiente problema, utilizo el javascript que ha facilitado Aoyama y funciona perfectamente, pero estoy haciendo una pagina con el tipico catalogo de fotos, y claro, está paginado.
Pues el javascript me funciona bien pero solo en la primera pagina, cuando cambio de pagina las fotos ya no me las coge, bueno mas bien lo que hace es que las transparenta enteras, o no las pone, vamos.

Por el 30 de Enero de 2007

A mi no me funciona, pongo exactamente esto en la css
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»(src='imagen.png',sizingMethod='scale');

y esto en una imagen que hay en una capa q esta por encima de todo y no me crea las transparencias, sale azul. y en ie7 me sale bien. (Por supuesto la foto q utilizo se llama image.png)
<img src="imagen.png" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='imagen.png',sizingMethod='scale');" alt="" />

Por el 30 de Enero de 2007

En esta pagina viene todo perfecto, con una demo para bajar, y no andar con lios

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Por Duilio el 15 de Febrero de 2007

Esto... estaba usando la solución y para ponerlo como fondo tuve que usar la ruta absoluta y no relativa, no sé si sólo me pasó a mí o es que tengo mucho tiempo sin pararme de la silla y ya no sé ni que hago ni porqué... pero en fin...

saludos

Por Johnny el 15 de Febrero de 2007

Duilio_blog :

Esto... estaba usando la solución y para ponerlo como fondo tuve que usar la ruta absoluta y no relativa, no sé si sólo me pasó a mí o es que tengo mucho tiempo sin pararme de la silla y ya no sé ni que hago ni porqué... pero en fin...

saludos

Bueno, es que al aplicar el filtro debes poner una ruta relativa al documento (X)HTML no al CSS, no hace falta que sea absoluta ni mucho menos, prueba y verás.

Por Rodo el 21 de Febrero de 2007

Pues si funciona el truco los png se ven transparentes pero no logro que la imgen png se repita, alguien me puede ayudar.

Saludos!!

Por Ai_d_A el 09 de Marzo de 2007

Y os funciona el codigo dentro de una capa visible, vamos como para poner una marca de agua, a mi con el explorer imposible, con el firefox no tengo ningun tipo de problema en ningun caso, ni le hacen falta los scripts, tambien es verdad que funcionan mejor los png8 con trapsarencia

Por mort el 10 de Marzo de 2007

Gracias todos aquellos que os molestais en ayudarnos a los que no sabemos.

Por S el 20 de Agosto de 2007

Freddie :

erdanblo_blog :

Para fondos no vale

Claro que sí. Es solo que no tuviste suficiente creatividad para implementar la solución

Pos va a ser que hay mas gente sin imaginación por que no funciona en fondos, o a lo mejor será que tienes mucha y ves de mas :lol:

, seguire intentando echarle imaginación

Por purplepark el 25 de Agosto de 2007

IE apesta!!!!!!!!!

Por el 29 de Agosto de 2007

Como se hace para que el png se pueda repetir usando todas esas soluciones. No encontrado alguna respuesta sobre eso.

Por salvado el 27 de Septiembre de 2007

Joder gracias por fin una solucion q funciona, ni pngfix.js, ni historias, esta es la unica q me ha pirulado, apuntate una amigo

Por Mic el 07 de Octubre de 2007

Inyaka :

estoy feliz

por fin me resulto solucionar el problema, en este blog tambien se trato el problema http://www.csslab.cl/?p=65 , yo personalmente lo estoy implementando de la siguiente forma en mi CSS.
digamos que le asigno la clase "titular" a una tabla donde pondre titulares y preciso darle un fondo transparente, entonces:

Código :

 .titular1{
   background-image: url(ruta/fondo.png) !important;
   background-image: none;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='ruta/fondo.png', sizingMethod='scale');
   background: repeat-y;/*o lo que se te venga en gana */   
}

** inyaka mira su cama mullida, comoda y ve de que es tiempo de dormir

INYAKA MUCHAS GRACIAS TU TIP ES EL UNICO QUE ME SIRVIO :cool:

Por ZRJ el 18 de Octubre de 2007

Vaya panda de emocionados! A ver si respetamos más al gremio. Cualquier programador que le pone interés es por lo menos sujeto a recibir un trato correcto. Los prepotentes mejor que se dediquen a picar codigo que es lo suyo en lugar de comentar.

Por josedelaranda el 23 de Diciembre de 2007

Gracias por este post me ayudó mucho en mi trabajo. Estuve horas en google buscando una solución a mi problema con PNGs transparentes y aquí encontré la solución.
Saludos

Por ABC el 02 de Enero de 2008

Degradados SOLO con CSS, sin usar imágenes:
http://www.designdetector.com/demos/css-gradients-demo-1.php

Recuerden probar que ocurre si se tienen desactivadas las imágenes y no las hojas de estilo :O

Saludos

Por Paulov el 29 de Enero de 2008

Este es el código de una imagen PNG-24 que se encuentra dentro de un Layout

<div id="lpost">
<img src="ies/ies12.png" alt="ONPvirtual" name="ies12" width="236" height="183" id="ies12" />
</div>

Como sabemos en IE no puedo visualizar imágenes PNG, como puedo hacer para visualizar la imagen?

La otra consulta es sobre una Layout “encima” de una tabla… ¿Dónde puedo hacer mi consulta?

Saludos desde Lima

Por Paulov el 29 de Enero de 2008

Perdon, se borro el encabezado en la consulta... upss

Saludos Amigos de CL, tuve el gusto de conocerlo en el Seminario que Hubo aca en Perú. Necesito de su Ayuda... Primero:

Por E el 12 de Febrero de 2008

Hey Paulo, te dejo la siguiente ruta donde puedes ver eso:

Web:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Demo:
http://webfx.eae.net/dhtml/pngbehavior/demo.html

Slds.

Por mussra el 19 de Abril de 2008

Buenas, he conseguido la transparencia en fondos .png que se repiten en el eje-x, pero, tengo un problema, y es que, tengo varios divs a los que les quiero poner un fondo png con transparencia, sin que se repita, le tengo puesto float:left, pero no me coloca la imagen y no se porqué es. Lo curioso es que si le quito el float:left funciona perfectamente, pero no me permite colocar el div como quiero. El código está en mi web, http://www.mussra.es (si entras con firefox, verás el resultado que busco). A ver cuando la gente se entera de que IE no vale la pena, o los de microsoft hacen porfín una versión en condiciones ...

Por dani el 03 de Junio de 2008

¿y si la imagen es una "list-style-image"? ¿cómo se puede hacer para que ese png se vea en IE6?

Por Alex el 13 de Junio de 2008

Claro, no es válido por la W3C, pero, ¿Quién dijo que IE cumple con los estándares?
__________________________________________

Pero los demás sí. Hay formas de hacerlo sin romper la validación. Espero que no haya problema con dejar enlaces:

http://www.webmasterlibre.com/2006/07/14/pngs-con-transparencia-en-internet-explorer/

Siento si ya se ha dicho esto, no he tenido tiempo de leer.

¡Saludos a todos!

Por victor el 12 de Enero de 2009

este comentario nada q ver con el tips pero para
Freddie y otros
q creen q todo se consiguen estar en una carrera profesional no basta .
Eso yo conosco y trabajo con profesionales mediocres (ya q tiene algun conocido superior u otro q le da una supuesta mano)
como el de la iamgen q Freddie el sujeto del medio como creen q llego al poder sin estudios profesionales lean un poco antes de criticar a alguien primero critiquense ustedes mismos antes q los demas yo por mi parte a mis 24 años de edad no estoy ya estro trabajando y un buen trabajo en la empresa GLOBALINK soy el coordinador del departamentos de sistemas este año 2009 recien estoy entrando a la UNIVERSIDAD todo lo q aprendi lo aprendi con esfuerzo empeze de mensajero a mis 18 años saliendo del cole empeze a leer manuales tutoriales se programacion avanzada en php,python,gtk2,xhtml,css,javascrip, java; se lo q es estar con gente envidiosa q solo quieren tu puseto difamando bajoneando criticando sin saber a ustedes les digo sean buenos profesionales no sean uno mas del monton q creen q por haber tenido titulo en una UNIVERSIDA cara son mas q los demasahora no me quejo de la vida tengo todo loq q querido internet wimax propio mi pentium portatil core duo con xubuntu y windows xp, mi carrito, un lugar bueno y setable para vivir ,no tengo ni una deuda ,salud dinero pero lo unico q no tengo es el amor de mi amada ;bueno me desvie del tema solo les digo cada uno es del propio esfuerzo q da

Por will_i_am el 23 de Marzo de 2009

Buenas, soy nuevo en esto apenas estoy aprendiendo programación con php, tengo un problema... todos los comentarios estan muy buenas soluciones o eso parece, pero hasta ahora estoy como dije antes aprendiendo, el problema que tengo es la pagina que estoy armando se ve perfecta con IE7 pero sale un recuadro azul en IE5, además un swf se corre hacia abajo y me deja un espacio, pero por ahora lo importante es los png , tons como hago... creo un archivo aparte con el codigo y desde el index lo llamo o como se hace tal vez arriba este la respuesta pero me gustaria saber si alguien puede enviar un ejemplo
gracias

Por will_i_am el 23 de Marzo de 2009

la pagina con el problema es www.laguiacundinamarca.com

Por beleita el 30 de Julio de 2009

en los FONDOS funciona, pero si NO se repite la imágen de fondo, y si necesio que el backgrund-image se repita?? ¿?

¿álguien sabe de un modo para que si se vea y se pueda usar la propiedad repeat?

Por www.spedevigner.com el 28 de Noviembre de 2009

es hermoso ver como la gente no lee una mierda y le encanta preguntar.
bo loco antes de preguntar hay que tratar de resolverlo solo sino nunca van a aprender nada.
malditos bastardos

Por CÃ©sar el 22 de Febrero de 2010

Yo lo estoy probando con un div sin ancho especifico, con la intención que se repita la imagen pero no lo he logrado:

#cabecera {
height: 84px;
background-color:#3366FF;
}
.degradado {
background-image: url(images/entorno/degradado_cab.png) !important;
background-image: none;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='images/entorno/degradado_cab.png');
background-repeat:repeat-x;
}
/* IE ignores styles with [attributes], so it will skip the following. */
.degradado[class] {
background:url(images/entorno/degradado_cab.png);
background-repeat:repeat-x;
}

Espero alguien tenga una respuesta a esto.... saludos.

Por CÃƒÂ©sar-blog el 22 de Febrero de 2010

mmmm perdón, ya lo logré , estaba bien... había dejado un espacio vacio

... más bien veo que en el IE se duplica el degradado y en Fire si se ve el degradado original....

Por mavalecu el 04 de Marzo de 2010

Bueno este hilo sobre la transparencia me ha sido de mucha utilidad, resolví todos los problemas, muchas gracias, que gusto da leeros!

Por CLAnonimo el 24 de Noviembre de 2010

necesito un egemplo de Ciclo repeat.

Por mili el 13 de Febrero de 2011

Por ahora la mejor y más rápida solucion a este problema SIN CSS para alguien como yo que no entiende mucho de programacion es la siguiente (en dreamweaver... html)
1. A la imagen png en custion agregarle detras el sufijo -trans, por ejemplo "ejemplo-trans.png"
2. Agregar el siguiente codigo entre las etiquetas </script> y </head>:

muy muy facil y funciona

PNG con transparencia alpha (PNG32) en internet explorer

Publica tu comentario

o puedes...