Popup avec fond flouté [Résolu]

Signaler
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008
-
Messages postés
2083
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
15 octobre 2020
-
Bonjour à tous !


pour être plus compréhensible avec mon sujet, voici une image pour montrer ce que je veux faire...

<!-- BBCode u2 Start -->http://img180.imageshack.us/my.php?image=floutenu6.png


voilà donc j'ai déjà réussi la popup et le fond "grisé" mais pour le flou alors là je ne sais pas faire du tout...


Meric beaucoup pour votre aide...

14 réponses

Messages postés
2083
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
15 octobre 2020
1
Essaye ça, testé uniquement sous Firefox.

<html>

 

   
    Salut
 

 

   
    Salut
 

<script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    function flou(obj){
        var o1 = $(obj);
        o1.style.opacity = 0.2;
        for (x=-1 ; x<2 ; x++)
            for (y=-1 ; y<2 ; y++)
                if (!(x==0 && y==0)){
                    var o2 = o.cloneNode(true);
                    o.parentNode.appendChild(o2);
                    o2.style.opacity = 0.2;
                    o2.style.left = (parseInt(o.style.left) + x) + "px";
                    o2.style.top = (parseInt(o.style.top) + y) + "px";
                }
    }
    flou("floubox");
</script>

</html>

Bonne continuation !
Flachy Joe

Ta vie t'est prêtée, fais en un cadeau.
Messages postés
2083
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
15 octobre 2020
1
Oups :

                    var o2 = o1.cloneNode(true);
                    o1.parentNode.appendChild(o2);
                    o2.style.opacity = 0.2;
                    o2.style.left = (parseInt(o1.style.left) + x) + "px";
                    o2.style.top = (parseInt(o1.style.top) + y) + "px";

Précision :
Il faut un container parent pour que o1.parentNode.appendChild fonctionne, il faut aussi être en position absolue et définir left et top.

Flachy Joe

Ta vie t'est prêtée, fais en un cadeau.
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Bonjour, bah facile, tu fais comme eux:
http://img180.imageshack.us/img180/7148/floutenu6.png

c'est une image flouté !

[o-_-o]
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008

c'est ironique ?
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Bah non, c'est ce qu'ils font.
pour flouter une image en javascript/css je n'imagine même pas comment on peut faire si ce n'est que déplacée n fois une image ne n caractère en lui applicant une opacité !
ça risque d'être un peu lourd !

[o-_-o]
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008

les textes derrière sont différents et chaque fois c'est une image flouté ?
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
Qu'entends tu par

les textes derrière sont différents ? je ne comprends pas bien

[o-_-o]
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008

C'est à dire, que si on va sur n'importe quel page du site, et que l'on clic sur blog, l'image qui est flouté derrière est différente à chaque fois.... c'est pas possible d'avoir autant d'image flouté par page et dès qu'il y a une modif faut refaire une image flouté ? whaa
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
d'accord, je viens de réveiller mon neurone, c'est fait en flash !

[o-_-o]
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008

ah oui d'accord.... tout s'explique...
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008

donc ce n'est pas possible sans passer par le flash ?
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
5
bah justement, pour me détendre je regardais un peu, mais c'est pas évident, ça risque de faire des pages qui auront un poids de ouf mais ça doit être faisable en passant par l'opacité et les positions.

[o-_-o]
Messages postés
7
Date d'inscription
lundi 28 novembre 2005
Statut
Membre
Dernière intervention
23 juin 2008

Merci c'est super !!!!!

Bonne semaine !
Messages postés
2083
Date d'inscription
jeudi 16 septembre 2004
Statut
Membre
Dernière intervention
15 octobre 2020
1
Pense à accepter la réponse, pour que les suivants trouve la solution plus facilement.

Flachy Joe

Ta vie t'est prêtée, fais en un cadeau.