Consulta JS / jquery / PNG / ie8

birdaleja · #1 (**permalink**) 15/01/2012, 14:39

Hola,
quizás alguien me pueda ayudar con un problemilla que tengo con jquery, estoy intentado hacer un simple fade, tengo un contenedor("#tech-wrap") con divs(".tech"), estos a su vez tienen otros divs(".tech-logos") y estos tienen unos PNGs con transparencias. Así lo estoy animando, y se ve bien en todos los navegadores menos en IE8, IE7...que se ve en fondo negro la transparencia del PNG.

Código Javascript:

Ver original$('.tech').mouseover(function(){
            $(this).find('.tech-logos').stop().fadeTo(200, 1);
        });
        
        $('.tech').mouseout(function(){
            $(this).find('.tech-logos').stop().fadeTo(300, 0.3);
        });

buscando encontré un solución, también la probé y se resolvió el problema, lo que pasa es que me modifica todos los PNGs de la página (que no tienen nada que ver con esta parte) y algunos los duplica y así no sirve, esto es lo que tengo:

Código Javascript:

Ver originalvar i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

pero como puedo hacer para que en vez de llamar a todas las imágenes del documento, solo llame a las que están dentro del contenedor ("#tech-wrap") ??

no pude salir de esta duda... agradezco mucho cualquier sugerencia

chau

chicohot20 · #2 (**permalink**) 15/01/2012, 19:12

Yo tambien me topé con ese problema, encontre varias soluciones pero ninguno me convencía, prefiero tener un codigo limpio, libre de hacks. Tuve que cambiarlo a JPG y en otras ocaciones cambiar de efecto.

birdaleja · #3 (**permalink**) 16/01/2012, 06:46

gracias por responder, pero no voy poder usar JPGs porque si necesito esa transparencia ya que el objeto se mueve y tiene otras cosas por detrás...

lo único que estoy necesitando es poder llamar a todas las imágenes de un contenedor en vez de toda la página (document.images) alguien sabe?? intente muchas cosas como:

document.getElementById(id).images

pero nada, obviamente no tengo idea de como hacerlo

gracias!

chicohot20 · #4 (**permalink**) 16/01/2012, 08:07

El filtro se aplica solo a las imagenes de #contenido2

Código HTML:

Ver original<html>
<head>
        <title>Jejeje</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script type="text/javascript">
$(function(){
    $("#contenido2 img").each(function(i,img){
        if (img.src) {
            var imgSrc = img.src;
            if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
                img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
            }
        }
    });
    setInterval(function(){ animar()},2000);
    function animar(){
        $("#contenido1,#contenido2").fadeToggle("slow", "linear");
    }
});
</script>
</head>
<body>
    <div id="contenido1">
        <img src="1.png" alt="" />
    </div>
    <div id="contenido2">
        <img src="2.png" alt="" />
        <img src="3.png" alt="" />
    </div>
</body>
</html>

birdaleja · #5 (**permalink**) 17/01/2012, 22:48

gracias ! funciona perfectamente, parece que me había complicado de más y solo era poner "#contenido img" igual que en CSS.

Ahora me gustaría llevar esto pero más bien para las imágenes de fondo, si es posible creo que será más complicado...