TfeServer

Blog de tfe, Web, Unix et Scripts...?

Fondu d'images CSS et Javascript

Publié le 27/10/2007 dans Web

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 proprie©te© CSS "opacity" d'une image. Cet attribut peut prendre les valeurs de©cimales de 0 e  1: 1 e©tant la valeur pour une image opaque. Seule ombre au tableau e©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:

e1

e1

e1

e1

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); }

e€ noter que l'attribut filter opacity demande pour valeurs un de©cimal de 0 e  100, d'oe¹ 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 meªme emplacement, et de©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).