Afficher une image avec "classe" (site w Résolu/Fermé

Question

Bonjour,
Je voulais demander si quelqu'un sait s'il est possible avec du php/html/css et eventuellement javascript d'afficher une image (à partir d'une miniature par exemple) avec un effet comme on voit sur certains site : l'image s'affiche devant la page et la page autour de l'image s'assombrit tout en restant visible. L'image ne s'affiche donc pas dans une fenetre ou alors celle-ci n'a pas de "bord" et une partie est transparente puisque l'on voit toujours la page derriere la partie assombrie autour de l'image...

Je sais pas si c'est très clair mon histoire mais si quelqu'un y comprend quelque chose... ;)

Merci d'avance

laveugle · Accepted Answer

Merci beaucoup,
En continuant à chercher j'ai vu qu'il existait un "outil" open source qui permettait de donner cet effet et d'après les explications que j'ai lu dessus ça a l'air de suivre la même idée que toi... (en un peu plus complexe)

https://www.digitalia.be/software/slimbox/ (voila pour l'outil en question et ce qui m'a mis sur la voie c'est cet attribut dans une balise de lien : rel="lightbox[atomium]").

et selon ce même site :
"And of course, it has been tested in all modern browsers: Firefox, Internet Explorer 6+, Opera 8+, Safari 1.3+ and Camino. It is not compatible with the old Internet Explorer 5.5 and will never be."

Voili voilou merci à tous ceux qui m'ont répondu et au forum lui-même sans lequel il n'y aurait pas eu de réponse du tout ;)

Char Snipeur · Answer

As tu regarder coment ces sites étaient fait ?

laveugle · Answer

Bonjour,
Oui j'ai essayé mais j'ai rien trouvé de parlant... (le code concerné ne semble pas apparaître). C'est vrai que ce genre de site sont souvent des sites pros donc je pense d'un autre niveau et je ne suis peut être pas capable de repérer correctement le code... .

vignemail1 · Answer

Tu met un

avec un z-index: 1000; qui prends tout la page, avec fond noir, tu cherches la propriété CSS opacity que tu mets à 50% par exemple. Tu centres ensuite ton dans la page, tu ajoutes un bouton "fermer" quelque part et voilà. opacity n'est pas standard donc cela marchera qu'avec les navigateurs très récents comme Firefox, IE7 (peut être sinon IE8 beta), Safari (le plus récent), Opera (idem). En gros tu auras des problèmes avec IE6 et avant. Autre solution, c'est de faire un visualiseur en flash avec fond semi-transparent que tu ajoutes à la taille de la page avec un bouton "fermer" en html/javascript qui redimensionne le visualiseur

Afficher une image avec "classe" (site w

4 réponses

Discussions similaires