En voyant la page officielle de Starcraft 2, je me demandais comment ils avaient fait pour faire un diaporama en fondu, sans utiliser Flash.
En fait il s'agit tout simplement de l'utilisation de la propriété CSS "opacity" d'une image. Cet attribut peut prendre les valeurs décimales de 0 à 1: 1 étant la valeur pour une image opaque. Seule ombre au tableau étant que Internet Explorer 5 et 6 ne supportent pas cet attribut: Il faut passer par un filtre. Exemple avec 1, 0.7, 0.4, 0.1:
Au final en javascript on obtient le code suivant.
var img = document.getElementById("mon_id_image");
img.style.opacity=0.5; /* Par exemple */
img.style.filter=alpha(opacity=0.5*100);
Ou tout simplement en css le code suivant
img
{
opacity:0.5;
filter:alpha(opacity=0.5);
}
À noter que l'attribut filter opacity demande pour valeurs un décimal de 0 à 100, d'où le "*100".
Avec ce petit code, et un peu de patience, nous pouvons faire un fondu entre 2 images: Il faut pour cela superposer 2 images au même emplacement, et dégrader celles-ci.
Si je ne suis pas clair, rien de plus parlant qu'un bon exemple (cliquez sur les miniatures pour modifier l'image).
kapouik
le 27/10/07 15:31:15
y a pas a dire c'état plus simple a l'époque du html 1.0 ...