11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Assombrir ou opacifier toute une page HTML

Bonjour,

en fait j'ai deux questions, somme toute très liées, qui font suite à ce topic.

1°) J'aurais aimé savoir quelle propriété CSS il faut que j'utilise pour pouvoir assombrir toute une page, comme sur ce site lorsqu'on clique sur les images.

2°) Exactement la même question mais en opacifiant toute la page html...

Le lien entre ces deux est de savoir comment récupérer les propriétés de toute la page HTML et savoir quel attribut (CSS ?) lui affecter pour l'assombrir. Pour l'opacifier je connais 'opacity' mais je n'arrive pas à opacifier toute la page: je n'arrive à opacifier qu'un bout de texte ou qu'une image Smiley decu

Je vous remercie d'avance pour votre aide.

Cordialement,
Flavien
Modifié par Flavien (19 Apr 2006 - 14:00)
Administrateur
Lightbox utilise un PNG transparent recouvrant toute la page.
Il n'y a pas (encore) de propriété CSS opérant le même genre d'effet à elle toute seule.
Modifié par dew (13 Apr 2006 - 16:05)
Ah, c'est donc ça.

Ainsi, j'imagine que sur le site, pour faire l'effet de transition (genre effet fondu), ils plaquent d'abord le PNG transparent sur la page et après ils font joujou avec la propriété opacity de CSS.

Un petit doute me vient cependant à l'esprit :
j'ai déjà eu à utiliser des PNG avec de la transparence dedans ==> firefox gérait très bien la transparence mais IE pas du tout. Mais le truc c'est que l'effet du site fonctionne également sur IE, c'est normal ?

[EDIT] Après vérification, lightbox utilise des GIFs transparents et pas des PNGs Smiley cligne Au temps pour moi... Merci
Modifié par Flavien (13 Apr 2006 - 16:15)
En fait j'ai recouvert ma page avec une balise DIV de couleur blanche. Ensuite, j'ai appliqué dessus de l'opacité :

Ca donne à peu près ça pour le HTML :

<body bgcolor="black">
	<div id="transp"></div>
	<span style="cursor:pointer;" onClick="javascript:voiler()">
		<font color="green">Assombrir</font>
	</span>
</body>

Le style CSS :

div#transp {
	position:absolute;
	top:0px;
	left:0px;
	background:white;
	height:0px;
	width:0px;
	filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
}

et le javascript :

var isIE = document.all?true:false;

function voiler() {
	var el = document.getElementById("transp");
	var hauteur;
	var largeur;
	if (isIE) {
		hauteur = document.body.clientHeight;
		largeur = document.body.clientWidth;
	} else {
		hauteur = window.innerHeight;
		largeur = window.innerWidth;
	}

	if (el) {
		el.style.height = hauteur;
		el.style.width = largeur;
	}
}

Evidemment ça peut faire 'cochon' de mettre en plein milieu 
<div id="transp"></div>
Alors, il est toujours possible de rajouter cette balise DIV de façon dynamique avec un peu de DOM et de javascript derrière.

En tout cas, merci à tous pour votre aide et à bientôt Smiley ravi

Bye,
Flavien
J'aurai une petite modification à faire sur ces 2 lignes :
el.style.height = hauteur;
el.style.width = largeur;


el.style.height = hauteur+"px";
el.style.width = largeur+"px";

Sinon le navigateur ne comprend pas.

Cependant même en modifiant ceci, ton script ne fait pas exactement ce qu'on aurait pu s'attendre à avoir. En effet, d'une part on observe une barre de défilement horizontal qui apparait et d'autre part la hauteur est défini sur la page visible à l'écran. Ce qui signifie que lorqu'on descend, l'ombrage disparait.

Après avoir cherché un peu, voici ce que j'ai trouvé :

function voiler() {

	var el = document.getElementById("transp");
	var hauteur;
	
	if (window.innerHeight && window.scrollMaxY) {	
		hauteur = window.innerHeight + window.scrollMaxY;
	}

	if (el) {
		el.style.height = hauteur + "px";
		el.style.width = "100%";
	}
}

Comme vous avez pu le remarquer, j'ai décider de mettre le width à 100%. En effet, à mon sens un site avec une barre de défilement horizontale a été mal conçu.
Malheureusement, ce code ne fonctionne ni sous IE ni sous Opéra (surement d'autre aussi). Mais, il suffit juste de trouver les bonnes propriétés pour ces navigateurs.

Voili voilou en espérant avoir été utile Smiley ravi
Oui, effectivement vous avez raison.
En fait je vous avouerais que j'ai tapé le code comme ça sans le tester, d'où l'oubli du "px" entre autre.
Je n'ai pas fait un copier/coller de mon code car j'ai préféré en faire un le plus simple possible. Mon but étant de donner le concept du truc Smiley cligne
Donc merci pour votre contribution.

Cordialement,
Flavien
Bon, je ne sais pas si je peux continuer la discussion sur ce post... mais je vais quand même le faire car ma question est liée (si nécessaire, post à déplacer dans la section CSS).

Quelle est la propriété CSS pour définir l'opacité pour Opéra ? Parce que des 3 propriétés présentées ici, aucune ne fonctionne Smiley ohwell

Merci
Apparemment Opera 9 (nom de code Merlin) gère le CSS3 et par la même, gère la transparence.
Pour les versions antérieures rien ne semble fonctionner pour faire de la transparence à la volée (sans passer par des images avec transparence comme les png).

Flavien
Sujet clos
Aller à