Dreamweaver - imagen sin fondo

 
Vista:

imagen sin fondo

Publicado por fran (20 intervenciones) el 21/02/2007 12:21:37
Hola,.... vereis ..tengo el siguiente problema.... he insertado una foto con dreamweaver ...y ahora quiero insertar una flechita encima.... desde photoshop he guardado la flechita como PNG ya que al insertarla en flash aparecen con el fondo transparente...pero al insertarla en dreamweaver m aparece con fondo de color.... y por supuesto...como JPG me aparece con fondo blanco. Me puede decir alguien q puedo hacer para q las fotos no tengan fondo???? q formato tengo q utilizar???
Muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

PNG transparente en IE

Publicado por Daniel Ulczyk (1171 intervenciones) el 21/02/2007 14:20:30
En una de las tantas limitaciones de IE es que no tiene la habilidad de mostrar la transparencia de canal alfa sobre una imagen PNG de 24 bits, aunque sí en 8 bits; donde la resolución tienta aquí a utilizar un GIF transparente.
Hay dos formas de lograr que el PNG muestre la transparencia.
Un script que sólo es cargado si IE es versión 5.5 o posterior (versiones anteriores ignorarán el script, no existe aquí retrocompatibilidad):

<! Entre la etiquetas head
<!--[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]-->

O bien mediante filtros que sólo son soportados por IE y que no validarán como CSS correcto:

<img src="imagen.png" width="100" height="100" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imagen.png', sizingMethod='scale');" alt="aqui el texto alternativo">

Espero puedas llegar a una solución aceptable. Ya que la primera no funcionan con JavaScript deshabilitado y la segunda no está acorde a las recomendaciones de la W3C. Pero esta es un cuestión entre tantas ya que sabemos que IE no se apega mucho a los estándares.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar