Comentarios del articulo Transparencia en formatos gráficos para web GIF y PNG no revisados


	Portada \| Monotemáticos \| Secciones \| Desarrolladores \| Comunidad \| Servicios \| Servicios profesionales \| RSS

	DesarrolloWeb.com > Articulos

Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades

Generador METAs | Compras | Busca cursos

Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

ARTICULO: Transparencia en formatos gráficos para web GIF y PNG

Se muestran 9 comentarios sin revisar

Yngvar Jaime Merino Gòmez 21/12/07

verdaderamente excelente totalmente gratificado pero siempre los peros donde aprendo a desarrollar esa tegnologia? gracias de verdad.
YNGVAR

Util | Inutil

Marcos Lazcano 03/1/08

Las imagenes PNG del articulo tienen todas un recuadro gris que no es transparente !!
Debe haber un error!!

Util | Inutil

Moises Lopez 03/1/08

Estoy de acuerdo con antonio .. debemos de recordar que mucha gente todavia utiliza el IE 6 y los pngs causan muchos problemas en esta version y las anteriores de este navegador, los filtros que existen no son funcionales en su totalidad ..

Util | Inutil

Juan Miguel 03/1/08

Las versiones de Internet Explorer 6.0.2900.21800 hacia atrás muestran todos los archivos PNG sin ser transparencias... esto se supera con un archivo Javascript que hace que estos se vean siempre transparentes. En casi cualquier navegador.. Sólo deberán colocar un código sencillo en el html que los contenga y un archivo de código que lo habilite y ya estaria listo.

Util | Inutil

Juan Miguel 03/1/08

Truco: Eliminar El Problema de las Transparencias PNG en Internet Explorer 6
Posted by Emiliano on Sep 6, 2007 y traido a esta sala por Juan Miguel.

Si algo que se torna molesto es que cuando diseñamos un logo o simplemente queremos usar un fichero PNG con transparencias es que el navegador IE6 nos distorsione con un cambio de color la transparecia en cuestion, pero para esto hay un arreglo, mediante javascript.

Lo que haremos es abrir nuestro editor "Bloc de notas" y pegar el siguiente código:

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:


*/

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
}
}
}

Luego deberas grabarlo con el nombre de "pngfix.js" y ubicarlo en alguna parte de nuestro servidor, luego en los html que contengan los pngs insertados colocar entre las etiquetas < head >< /head > lo siguiente:

<!--[ if lt IE 6.] >
< script defer type="text/javascript" src="pngfix.js" src="pngfix.js"> < /script >
<!--[endif] >

Nota: En src recuerda poner la ruta completa del archivo javascritp y si lo deseas usar en WordPress edita el header.php

Util | Inutil

Tadeo Guerra 03/1/08

Saludos,

con este articulo que deja muy claras las diferencias entre los formatos gif y png los felicito! en especial al autor,

Solo quería sugerirles que coloquen entre la info, que el png 24 no funciona correctamente sobre MSIE, del 6 para abajo si no me equivoco, y hay que utilizar unos truquillos con JS y tener unos scripts adicionales para producir el efecto,

no basta solamente con elaborar la img en PNG-24, firefox por ej. no tiene este problema ni opera ni todos los apegados a los estandares,

pero como el MSIE sigue siendo muy utilizado en especial en sus vers anteriores al 7, bueno, es bueno acotar la necesidad de estas "librerias" adicionales para lograr producir el efecto...

Util | Inutil

Ricardo Ernesto Elías 04/1/08

Me parece excelente la explicación detallada en el artículo. Sólo tengo una observación. No se si el autor ya notó que en el Internet Explorer versión 6.0 no hay buen soporte para imágenes transparentes de formato PNG.
Se que el Internet Explorer es muy odiado por no apegarse a estándares, pero es una realidad que una buena parte, por no decir la mayoría de usuarios es el navegador que más utiliza.
Al cargar la página con el artículo el fondo de las imágenes PNG se ve gris siempre en el Internet Explorer 6.0.

Util | Inutil

Ricardo Ernesto Elías G. 04/1/08

Creo que Juan Miguel ha resuelto el problema de todos los comentarios. Gracias por el script, lo pienso utilizar, muchas gracias realmente me ha sido util este artículo y los comentarios que se han publicado. Muy finos todos.

Util | Inutil

Webramientas 10/1/08

Buenas, en el Firefox se me ve bien, pero en el Internet Explorer 6, las imágenes PNG del ejemplo no me aparecen como transparéntes sino con fondo gris.

Util | Inutil

Ver el articulo y todos sus comentarios
Añadir un comentario del artículo
Ir arriba

Comentarios no revisados de:

+ Transparencia en formatos gráficos para web GIF y PNG

		DesarrolloWeb.com \| Copyright \| Anunciese \| Acerca de \| Datos legales \| Contacta \| Por GuiarteMultimedia

Alojamiento web

Yngvar Jaime Merino Gòmez	21/12/07
verdaderamente excelente totalmente gratificado pero siempre los peros donde aprendo a desarrollar esa tegnologia? gracias de verdad. YNGVAR
Util \| Inutil

Marcos Lazcano	03/1/08
Las imagenes PNG del articulo tienen todas un recuadro gris que no es transparente !! Debe haber un error!!
Util \| Inutil

Moises Lopez	03/1/08
Estoy de acuerdo con antonio .. debemos de recordar que mucha gente todavia utiliza el IE 6 y los pngs causan muchos problemas en esta version y las anteriores de este navegador, los filtros que existen no son funcionales en su totalidad ..
Util \| Inutil

Juan Miguel	03/1/08
Las versiones de Internet Explorer 6.0.2900.21800 hacia atrás muestran todos los archivos PNG sin ser transparencias... esto se supera con un archivo Javascript que hace que estos se vean siempre transparentes. En casi cualquier navegador.. Sólo deberán colocar un código sencillo en el html que los contenga y un archivo de código que lo habilite y ya estaria listo.
Util \| Inutil

Juan Miguel	03/1/08
Truco: Eliminar El Problema de las Transparencias PNG en Internet Explorer 6 Posted by Emiliano on Sep 6, 2007 y traido a esta sala por Juan Miguel. Si algo que se torna molesto es que cuando diseñamos un logo o simplemente queremos usar un fichero PNG con transparencias es que el navegador IE6 nos distorsione con un cambio de color la transparecia en cuestion, pero para esto hay un arreglo, mediante javascript. Lo que haremos es abrir nuestro editor "Bloc de notas" y pegar el siguiente código: /* Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. Use in <HEAD> with DEFER keyword wrapped in conditional comments: <!--[if lt IE 7]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]--> */ 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 } } } Luego deberas grabarlo con el nombre de "pngfix.js" y ubicarlo en alguna parte de nuestro servidor, luego en los html que contengan los pngs insertados colocar entre las etiquetas < head >< /head > lo siguiente: <!--[ if lt IE 6.] > < script defer type="text/javascript" src="pngfix.js" src="pngfix.js"> < /script > <!--[endif] > Nota: En src recuerda poner la ruta completa del archivo javascritp y si lo deseas usar en WordPress edita el header.php
Util \| Inutil

Tadeo Guerra	03/1/08
Saludos, con este articulo que deja muy claras las diferencias entre los formatos gif y png los felicito! en especial al autor, Solo quería sugerirles que coloquen entre la info, que el png 24 no funciona correctamente sobre MSIE, del 6 para abajo si no me equivoco, y hay que utilizar unos truquillos con JS y tener unos scripts adicionales para producir el efecto, no basta solamente con elaborar la img en PNG-24, firefox por ej. no tiene este problema ni opera ni todos los apegados a los estandares, pero como el MSIE sigue siendo muy utilizado en especial en sus vers anteriores al 7, bueno, es bueno acotar la necesidad de estas "librerias" adicionales para lograr producir el efecto...
Util \| Inutil

Ricardo Ernesto Elías	04/1/08
Me parece excelente la explicación detallada en el artículo. Sólo tengo una observación. No se si el autor ya notó que en el Internet Explorer versión 6.0 no hay buen soporte para imágenes transparentes de formato PNG. Se que el Internet Explorer es muy odiado por no apegarse a estándares, pero es una realidad que una buena parte, por no decir la mayoría de usuarios es el navegador que más utiliza. Al cargar la página con el artículo el fondo de las imágenes PNG se ve gris siempre en el Internet Explorer 6.0.
Util \| Inutil

Ricardo Ernesto Elías G.	04/1/08
Creo que Juan Miguel ha resuelto el problema de todos los comentarios. Gracias por el script, lo pienso utilizar, muchas gracias realmente me ha sido util este artículo y los comentarios que se han publicado. Muy finos todos.
Util \| Inutil

Webramientas	10/1/08
Buenas, en el Firefox se me ve bien, pero en el Internet Explorer 6, las imágenes PNG del ejemplo no me aparecen como transparéntes sino con fondo gris.
Util \| Inutil

	Ver el articulo y todos sus comentarios
	Añadir un comentario del artículo