Dans cette page
Plus de scripts

Faciliter la lecture des tableaux. : Met en valeur la colonne et la ligne de la cellule pointée dans un tableau.

script suivant - tous les scripts
Gardons le contact
Souternir webbricks
- ¿ Comment donc ?

opacite

transparence

opacity

webkit

moz

khtml

transparent

script

javascript

php

css

Une unique commande javascript pour modifier les css quelque soit le navigateur.

OPACITé CROSSBROWSER

script : setOpacity
langage : javascript
catégorie : fragment
usage : Une unique commande javascript pour modifier les css quelque soit le navigateur.
tags : crossbrowser snippet - effets spéciaux

Concept

La propriété css opacity permet de donner de la transparence aux éléments HTML. Officiellement, elle n'apparaît(ra) qu'avec css 3.
Mais les principaux navigateurs savent gérer depuis longtemps cet effet. Le seul problème est que chacun utilise sa propre syntaxte. setOpacity permet de se simplifier la vie en réglant la transparence d'un élément pour tous les navigateurs d'un seul coup.

Démo

Avec les liens ci dessous, de part et d'autre de l'affiche, vous pourrez faire disparaître et réapparaître l'Homme Invisible :

moins opaque the invisible man plus opaque

Code

Commencer par charger le script, tout à fait normalement, en plaçant le code suivant entre les balises <head> et </head> de la page :

<script src="setOpacity.js" type="text/javascript"></script>

Ensuite, pour régler l'opacité d'un élément, il vous suffira d'appeler la fonction, avec deux arguments :

setOpacity(
	document.getElementById('truc'), // l'élément à traiter
	0.5 // le degré d'opacité : 0=transparent, 1=opaque
);

Si par ailleurs, vous cherchez à mettre en place des effets de fondus, je vous invite à regarder du côté de cet autre script : fade.js, spécialement conçu pour ça; ou bien à coupler setOpacity avec Animate.js, qui permet d'animer les éléments HTML.

Téléchargement

Vous pouvez télécharger le script, ou bien faire un copier-coller :

function setOpacity(elem, value) {
	value = (value == 1)?0.99999:value;
 
	elem.style.opacity = value;
	elem.style.filter = 'alpha(opacity=' + value*100 + ')';
	elem.style.MozOpacity = value;
	elem.style.KhtmlOpacity = value;
}