[CSS] Hauteur de div dynamique au-dessus permettant de griser une page

Bonsoir et excellente année à tous !

J'ai un script sur une page qui permet d'afficher une image (cf le site du figaro qui fait ça pour ses photos) : on clique sur une miniature et cela affiche un div noir opaque à 50% et par dessus un agrandissement de l'image.

Je me demandais comment dimensionner le div en question pour qu'il couvre l'intégralité de la page, y inclus ce qui est en dessous de l'ascenseur, sachant que la hauteur de page varie ?

Actuellement j'ai mis 100% mais évidemment si je scrolle l'ascenseur, je n'ai plus le div semi opaque.

Merci pour vos idées !

La solution idéale consiste en un masque placé en position absolue (0,0) et de dimensions 100% x 100%. Mais les 100% en CSS correspondent malheureusement à la partie visible du document. Et il semblerait que JavaScript ne permette pas non plus de déterminer les dimensions qui nous intéressent.

Il faut donc se rabattre sur une solution un peu bricolée. Elle consiste par exemple à créer un masque dimensionné pour recouvrir la zone visible, et positionné au début de cette zone.

Seulement cela n'est valable qu'à un instant donné. Il suffit d'un redimensionnement ou d'un défilement par l'ascenceur pour que le masque semble flotter sur la page.

Il faut donc réajuster le masque (position verticale et dimensions) à chaque événement window.onscroll
et window.onresize. En cas de problème avec ces événements, on peut même pousser le vice encore plus loin en réajustant le masque à interval court et régulier (genre 200 ms), en tâchant d'optimiser le script pour limiter les accès DOM en écriture aux cas où il y a changement afin de ne pas abuser du processeur.

C'est bien moche tout ça...
Modifié par Maxwell7 (02 Jan 2007 - 03:20)

Salut.

Ce script fait cela très bien. http://www.huddletogether.com/projects/lightbox/

Chez moi sous FireFox 1.5, il y a un bug lorsque l'on fait apparaître un ascenceur horizontal en réduisant la largeur de la fenêtre.

Autrement ça marche plutôt bien.

Ah c'est exactement ce que je cherche à reproduire Merci pour le tuyau, je vais décortiquer ce script.