Comment Dropbox fait-il fonctionner son opacité PNG + transparente sur IE?

Question

Je vois que sur www.dropbox.com, l'image watch_a_video2.png est une image PNG transparente avec une opacité fixée à 0.5. Lorsque vous passez la souris dessus, l'opacité change. Comment font-ils pour ne pas avoir un contour sombre autour de l'image watch_a_video2.png avec IE7/8?

Je ne vois pas un filtre ou d'une bibliothèque fixe IE spécifique ...

J'essaie de reproduire leur style avec Jquery et il fonctionne très bien avec Firefox/Safari, mais je reçois un contour noir avec IE.

Merci pour votre aide.

Answer 1

Ils utilisent prototype (un framework JavaScript JQuery un peu comme). Ce code semble obtenir l'effet (autrement dit, ils ne sont pas simplement en utilisant css):

document.observe("dom:loaded", function() { 

    var play_link = $("playvideo"); 

    play_link.observe("mouseover", function() { 
     new Effect.Opacity(play_link.down("img"), { duration: 0.2, to: 1.0 }); 
    }); 

    play_link.observe("mouseout", function() { 
     new Effect.Opacity(play_link.down("img"), { duration: 0.2, to: 0.5 }); 
    }) 


    if (!FlashDetect.versionAtLeast(9)) { 
     $("has_flash").hide(); 
     $("no_flash").show(); 
    } 
}); 

Le code HTML que ce code s'applique à:

<a href="#" id="playvideo" onclick="play_screencast(); return false;"> 
    <img src="images/watch_a_video2.png" alt="Watch a video about Dropbox."/><br /> 
    Watch a Video 
</a> 

Vous auriez probablement à mettre quelque chose comme ça dans le CSS aussi:

a {text-decoration:none;} 
img { border:none;} 
/* of course you'd probably want to use a class or id on these elements */ 

Le CSS ci-dessus enlèvera le soulignement du lien, et la frontière de l'image. Enfin, si vous pouviez poster votre code actuel, cela pourrait être utile (je ne pouvais pas voir le contour bleu dans IE8).