Find Wines with CSE

2007-12-18

Opacite et transparence

Un article sur les filtres pour le Blog d'Aide en français





Firefox et Internet Explorer (5.5 et au-delà) disposent d'un filtre qui peut s'appliquer sur une image ou un bloc de texte.

La théorie

L'opacité (opacity) est définie comme le complément à 100 du taux de transparence (!) du filtre. Ainsi une opacité de 95% ne filtre que 5% de couleur, alors qu'une opacité de 5% retient 95% des couleurs.
Sous Firefox, le paramètre opacity varie de 0 à 1, alors que sous Internet Explorer, on utilise un filtre alpha (opacity) variant de 0 à 100.

L'utilisation

L'opacité peut être utilisée pour un bloc div, un paragraphe, des titres, une table complète ou des cellules. Elle s'utilise généralement avec une image. Pour le cas d'une image, Internet Explorer impose de définir au moins l'une des dimensions (width ou height).

Utilisation dans un bloc div

Le bloc div sans filtre


Le bloc div opaque à 90 % - filtre de 10 %

Le bloc div opaque à 70 % - filtre de 30 %

Le bloc div opaque à 50 % - filtre de 50 %

Le bloc div opaque à 30 % - filtre de 70 %

Le bloc div opaque à 10 % - filtre de 90 %




Le style du bloc div


// le bloc div opaque à 70 se définit comme suit, la clause opacity pour FF et le filtre pour IE
.opaque70 {
opacity: .7;
color: white;
filter: alpha(opacity=70);
}


Un filtre sur une image


L'image initiale est affichée avec une opacité de 20 %, le filtre est supprimé en passant le curseur de la souris sur l'image.



Le code


// la fonction agit comme un flip-flop et passe d'une opacite de 20 % à 100 % (pas de filtre)
// document.all permet de tester le type de navigateur
//
function changevisibility(lowvis,highvis)
{
force=(highvis==0)? 1 : 0.2
if (document.all)
lowvis.filters.alpha.opacity=force*100
else
lowvis.style.opacity=force
}


Un filtre sur une image qui change continuellement

Pour Noël, une image dont l'opacité varie par incrément de 5 %



Le code


// setInterval permet l'appel toutes les 250 millisecondes de la fonction
// l increment d opacite est de 5 %
// document.all permet de tester le type de navigateur
//
op=0;
var op_plus = 1;
var op_moins = 0;
//
function f_opacity()
{
if (op < op_plus="0" op_moins="1"> 0.05 && op_moins)
op-=0.05
else
{
op_plus=1
op_moins=0
}
if (document.all)
document.getElementById("testop_change").style.filter="alpha(opacity=" + 100 * op +")";
else
document.getElementById("testop_change").style.opacity=op;
}
setInterval("f_opacity()",250);











Lire la suite ...

2007-12-16

Ajouter une page ou une URL dans ses favoris

Ou mieux utiliser le bookmarking social





Enregistrer LES LIENS DU VIN
dans les favoris

Ou mieux utiliser le SOCIAL BOOKMARKING

Lire la suite ...