Salut à tous !
Je fais appel à vous pour essayer de comprendre comment est réalisé l’effet “arrière plan grisé” (si quelqu’un à une meilleure description…) comme on peut le voir dans cet exemple :
Lorsque l’on clique sur “Settings”, une fenêtre s’ouvre et tout ce qui est en arrière plan est grisé afin de porter toute l’attention visuelle sur la fenêtre qui est en premier plan.
Comment est réalisé cet effet ? Est-ce du JavaScript ? Auriez-vous des exemples de scripts de ce genre ?
http://www.teledisnet.be/web/pgi06532/DOCS/netvibes1.jpg
http://www.teledisnet.be/web/pgi06532/DOCS/netvibes2.jpg
Merci pour vos lumières. 
Javascript + css :
Suffit de foutre un div d’une taille supérieure à la zone de visualisation, avec un z-index élevé, en position absolute, avec un fond noir , et une opacité à .7 (ou sinon une png avec canal alpha, ou un gif 2x2 avec un pixel sur deux transparents).
Pour le côté Général Settings, même idée : z-index supérieur à celui du fond noir, et position absolue + centrage.
Javascript ne sert juste qu’à changer la taille en fonction du navigateur, de l’écran, etc.
Je pense qu’en OpenGL ça doit être faisable (mais je ne m’y connais pas assez pour en être sûr).
Sinon jette un oeil du côté du langage Flash (là je suis certain que c’est faisable)
Bonjour,
Merci pour vos réponses. J’essaye d’éviter le Flash puisque j’ai vu que c’était possible sans (pas de Flash dans l’exemple que j’ai donné). Je vais étudier un peu l’idée de “Sans-Nom” qui m’a l’air intéressante.
Si vous avez encore d’autres idées ou que vous avez déjà fait ce genre de choses, n’hésitez surtout pas à venir enrichir ce post. :super:
Amicalement.
T’es bourré ? :ane:
Regarde du coté de lightbox, qui implémente ça
Faut en vouloir pour le faire en OGL surtout quand c’est pour du web 
Y a pas (encore) de librairies JS-OpenGL/DX hein
NeqO & Sans-Nom > Je réponds du mieux que je peux avec les informations que j’ai. Nulle part il ne limite ses recherche au développement Web :neutre:
Quand on parle de javascript en général tu sais
Salut
Est ce que c’est compatible IE ?
+++
oui.
Avec les filtre, avec le PNG transparent, ou le gif comme disais Sans-Nom, les trois marcheons sous IE7.
Sous IE6 il n’y a que le PNG qui ne marchera pas
En fait, ça marchera sous IE6, et 5, car ça utilise les filtres.
Merci ! Ca a l’air bien intéressant tout ça. Sinon, j’y suis parvenu actuellement avec un PNG transparent et un DIV caché (display:none) qui devient visible (display:block) lorsque l’on clique sur un lien (grâce à Javascript). Mais il y a un petit souci, c’est que s’il y a une animation Flash sur la page, cette animation ce met en premier plan sous IE et Opera et ce, malgré un positionnement via z-index (CSS).
Je vais étudier le fonctionnement du script Lightbox. Encore merci.
Raynor => Oui, excuse-moi si ce n’était pas clair, mais je me limite, en effet, exclusivement au développement web.
Concernant le flash, je ne crois pas qu’il soit possible de passer par dessus.
enlève les pubs :ane:
Tu n’y pourrais rien. Certains éléments ont un comportement bien à eux, totalement pas CSS. Exemple : le tag <select />, qui utilise un overlay au dessus de la zone des z-index.
C’est fort dommage, car c’est un peu embêtant. En tout cas, avec CSS, ça n’est effectivement pas possible. J’ai vu qu’il existait des solutions Javascript pour faire passer l’animation en arrière plan, mais c’est encore du bricolage et ça m’a l’air assez complexe. Je n’ai pas encore testé. Sous Firefox, par contre, l’animation se met bien en arrière plan sans que je n’ai à faire quoique ce soit.
NeqO => Ca n’est pas une pub, juste une animation décorative sur la page d’accueil du site.
Publie flash en mode “opaque”, ça devrait permettre d’utiliser les z-index.
Héhé ça fonctionne ! Merci du tuyau. :super: