Como colocar imagem PNG com transparência no Internet Explorer
Já todos sabemos que o Internet Explorer tem problemas com transparência em imagens PNG ( Portable Network Graphics ).
Existem na net varios tutoriais e debates sobre o assunto mas todos acabam por utilizar o mesmo metodo. O AlphaImageLoader, problema é que pelo que vi o script que utilizo na pagina não funciona com imagens de PNG que estejam definidas como fundo ao que sugiro que tentem este script.
O que têm de fazer é o seguinte:
1 - Copiar o script para o servidor, guarda-lo como .js (exemplo pngfix.js)
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()
{
for(var i=0; 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 = ”
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(”onload”, correctPNG);
2 - Agora coloquem, dentro das tags <head> </head>, na página que pretendem que o script faça efeito coloquem:
< !–[ if gte IE 5.5000 ] >
<script type=”text/javascript” xsrc=”pngfix.js” mce_src=”pngfix.js” > </ script >
< ! [ endif ] –>
NOTA: devido a problemas com a interpretação do codigo no post eu coloquei espaços a mais entre <> e [ ], tenham atenção a eles.
E pronto, em principio deverá funcionar.
Links que podem ajudar:
- http://redvip.homelinux.net/varios/explorer-png-en.html
- http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
- http://homepage.ntlworld.com/bobosola/index.htm
- Sobre o AlphaImageLoader filter.
2 Comentários
Deixa um comentário
Rinaldi Fonseca 08.31.07 @ 6:50 pm (Comentário)Parabéns pelo artigo. Realmente estão maneira ajuda bastante a “burlar” as deficiências do IE.
Rinaldi Fonseca
Criação de Sites
Bugfix para imagens PNG no Internet Explorer | Blue MUIOMUIO 03.26.08 @ 1:24 am (Pingback)[...] Em 2006 publiquei um artigo que ensinava como colocar transparência em imagens PNG no Internet Explorer 6. [...]
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line=""> , Comentários com * são obrigatórios
