PNG, tercera parte
Otra anotación más sobre PNG. Esta vez me he topado con un comportamiento no sé si decir que raro, malo, defectuoso o normal e intencionado. Si tenemos áreas transparentes en nuestra imagen, y la misma está enlazada, observaremos que Internet Explorer quita todo tipo de evento cuando pasamos el cursor sobre la zona transparente, mientras que las zonas donde hay cosas visibles si reaccionan los eventos.
Es raro pero a la vez lo encuentro útil para otras cosas. Firefox reaccionó de forma diferente, como de toda la vida vamos… Quizás esto sirva para algunos y tengo un presentimiento de que esto se puede desactivar mediante otro hack al código que estoy utilizando en mi weblog.
Entonces, para utilizar PNGs y estar satisfechos con Internet Explorer, tenemos que tener en cuenta:
- PNG no está 100% soportado en Internet Explorer. IE 7 tendrá soporte PNG mejorado.
- Hay que utilizar un hack con código propietario de Microsoft (pero degrada bien y sin problemas)
- Hay ciertas imágenes que se alargan verticalmente (sobre todo las delgadillas)
- Llamar los PNGs desde una hoja de estilo hace que el hack del punto 2 no funcione.
Y si te sirve puedes leer el post inicial de PNG, le noveau plaisir o el segundo: PNG, segunda parte para completar la idea.
7 Comentarios en “PNG, tercera parte”
Diego, que hay del comentario que deje en âPNG, segunda parteâ?
Donde algunos feed agregator como el FeedReader 2.7 que uso yo no soporta PNG aun cuando le incluyas el JavaScript que le pones para que se vea correctamente en IE.
salu2!!
Insisto en que esos de microsoft tiene que trabajar mucho en eso de los estandares de internet explorer.
Por ahora solo queda usar algunos hacks para sacarle provecho a las transperencias del PNG en MSIE, como el siguiente:
Firefox 1.0.4, Camino 0.8.1, Opera 7.51, Mozilla y Netscape 7.2 ponen una imagen png 24b más clara de su color real.
IE-Mac 5.2.1 la pone un poquitín más oscura.
Safari 2.0, IE6 OK
Es un problema importante cuando el gráfico se posiciona sobre un fondo con el mismo color.
Y tambien que cuiden en que el SO traiga toda la información necesariaâ¦
Creo que para hacer eso es mejor utilizar los mapas de imágenes, ¿no? Hace años y años que no los uso pero aún los veo de vez en cuando en algún mapa o algo similar. Es ese código que permite que, en función de las coordenadas, el click en una imagen lleve a una URL o a otro.
Un increible uso de los png transparentes y el z-index lo tenéis en http://chiseko.hosted.doosh.net/
El truco que emplea para el IE es usar otro png sin transparencia, o eso al menos me parece a mi, mirando la hoja de estilos.
navweblog {
background-image: url(â/images/design/navweblog.pngâ);
position: absolute;
z-index: 4;
top: 212px;
left: 35px;
width: 271px;
height: 312px;
}
* html #navweblog {
background-image: url(â/images/design/internetexplorer/navweblog.pngâ);
}
Filantrópika.05
27 de Mayo de 2005 a las 3:05 pm