Cristalab

                 ¿Quieres registrarte?

PNG con transparencia alpha (PNG32) en internet explorer

Por: Alan
15 de Abril del 2006
388 de clabLevel
Otros artículos de Alan
85,164 visitas
css

Mediante un pequeño ajuste en tu CSS, puedes ver imágenes PNG con transparencia Alpha en IE... ¡Es cierto! :o

Código :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='imagen.png',sizingMethod='scale');

Por ejemplo, si ponemos:

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.

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


Artículos Relacionados


Etiquetas css

Comentarios | Enviar un comentario
¿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: Ed
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: NEO_JP
Se podría implementar de alguna manera para los que utilizan png en su avatar dentro del foro?
Por: glsmaster

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: Ed

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: Alan
¿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: Drakedalfa

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: Alan
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 :S

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

Salu2
Por: eporroa
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: Freddie
Ya lo dijiste xD
Por: NEO_JP
Un ejemplo en vivo puede ser encontrado en mi sitio
Por: Alan
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 :S .. 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... :D ...

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 :D
PD3: Take it easy ... solo lo comente con un tono sarcástico, como por aqui se hace verdad?
Por: eporroa
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]-->





:D
Por: daat_lod
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: NEO_JP_blog
Esperen un momento que es una condicional, como hago eso :lol:
Por: GersonM_blog

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 <!--[if lt IE 7]> una versión anterior al IE 7, si es encontrada, entonces cargaremos el archivo javascript que en este caso he llamado png.js y terminamos con <![endif]-->, 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: Aoyama
Excelente el ejemplo con codigo y todo.

(y)
Por: La100rra
Oigan eso es injusto falto mi foto dentro de esos 3 q ahora somos 4. :lol:

"Los 4 Jinetes del Apocalipsis"
Por: Jack Royce

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: Freddie
IE 7 no soporta las transparencias de los PNG?
No era esta una de las "novedades" de IE7?
Por: Sanwar_blog

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: Alan
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: Lu_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...
Por: Tronzo_blog

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: 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.


* SIGHS *
Por: Maikel

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: Alan

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 ... U_U ... deberían enviarles unos :ruso: :ruso: ... U_U
Por: Aoyama
Para fondos no vale :(
Por: erdanblo_blog

erdanblo_blog :

Para fondos no vale :(
Claro que sí. Es solo que no tuviste suficiente creatividad para implementar la solución
Por: Freddie
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: NEO_JP

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: Aoyama
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: Gunther_blog
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: NEO_JP
Gunther ya te habia mencionado que el sizing Method="crop" no te iba a funcionar... puedes usar scale o image en su lugar....
Por: Aoyama
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: ReynierPM_blog
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: Sue_blog
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: Aoyama
por que no crear una ventana donde se pueda cambiar a formato png una imagen gratis seria bueno
Por: joseluis_blog
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 :D
Por: Querube
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: ryuz

ramm :

O sea que yo no hago sites profesionales?

ha dicho porfesionales ramm, "porfesionales"
Me encanta cómo suena... 8)
Por: Johnny
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: Querube
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: dugalman_blog
hola dugalman_blog

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

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

:)
Por: Querube
Agradesco el dato querube_blog, sirvio el parche para BUGEXPLORER.
Por: dugalman_blog
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: Aoyama
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: Querube
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: walvaRo_blog
yo uso un CSS externo siempre :wink:
Por:
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: MichelH
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_blog
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_blog
P.D. De todas maneras es un buen truco. ;)
Por: JAMEK_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. ;)
Por: freak_blog

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: Alan
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: glsmaster
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
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: Inyaka
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: Thor_blog
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: ecosonoro_blog
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: jch
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 :D
Por: excavadora_blog
el javascript de daat_lod funciona perfecto!

IE6 WinXPSP2
Por: madman_blog
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: Jorge_blog
¿ 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: Daniel Rodríguez_blog
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: Jesus_blog
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:
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:
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: Duilio_blog

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: Johnny
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: Rodo_blog
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: Ai_d_A_blog
Gracias todos aquellos que os molestais en ayudarnos a los que no sabemos.
Por: mortadelo

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: Supino
IE apesta!!!!!!!!!
Por: purplepark_blog
Como se hace para que el png se pueda repetir usando todas esas soluciones. No encontrado alguna respuesta sobre eso.
Por: HTXML
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: salvado_blog

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: MichaelC
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: ZRJ_blog
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: josedelaranda_blog
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: ABC_blog
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_blog
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: Paulov_blog
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: El Che
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: mussra
¿y si la imagen es una "list-style-image"? ¿cómo se puede hacer para que ese png se vea en IE6?
Por: dani-blog
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: Alex-blog
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: victor-blog
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
la pagina con el problema es www.laguiacundinamarca.com
Por: will_i_am
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.