Partage
  • Partager sur Facebook
  • Partager sur Twitter

Une fausse popup

Pas DHTML

Sujet résolu
    27 août 2006 à 15:42:49

    Bonjour,

    Je cherche un code qui créer un DIV relatif mais qui ne prend pas la place de son texte...

    Est-ce possible ?

    :o
    • Partager sur Facebook
    • Partager sur Twitter
      27 août 2006 à 15:51:28

      apparemment personne ne repond donc je ne suis pas le seul a ne pas comprendre explique un peu plus ce que tu veux faire et on pourra mieux t'aider
      • Partager sur Facebook
      • Partager sur Twitter
        29 août 2006 à 9:17:44

        Alors,
        Dans les cours "Mise en boite ( Partie 2/2 )" de M@teo21, et dans la sous-rubrique "Positionnement absolu, fixe et relatif", il y a cette image :

        Image utilisateur

        Ensuite, on fais une transformation par CSS, et il y a ça :

        Image utilisateur

        Comment faire ,pour que le "ce texte est important" , dans la deuxième image, ne prenne pas "l'espace" qui'il y avait pour lui dans la première image ?

        Autre explication : Je pense que tout le monde c'est déja balader sur des sites :-° et sur certains, il y a des mots qui sont sur-sur ligné ( avec deux lignes dessous ) et quand l'on passe la souris dessus, il y a une "mini-fenêtre" qui s'affiche. Comment fairee ? C'est exactement ce que je cherche...
        • Partager sur Facebook
        • Partager sur Twitter
          3 septembre 2006 à 22:42:54

          position : absolute; ;)
          • Partager sur Facebook
          • Partager sur Twitter

          Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

            4 septembre 2006 à 8:34:48

            Ah... je comprend ce que tu veux :) Ce que tu cherche ce nomme une infoBulle c'est l'espèce de petite fenêtre jaune qui s'affiche au bout d'un certain temps. Pour surligner ton texte, c'est une propriété CSS qui est peut être dans l'annexe de matéo, et pour l'infobulle qui apparait d'un coup, il te faudra réaliser cela en javascript :/ (tu verra si tu n'y connais rien tu ne comprendra absolument rien au code mais un simple copier coller suffit ;) ) Alors fais des recherches dans google du style comment créer un infobulle qui apparait automatiquement au passage de la souris. Je sais que c'est pas vraiment de l'aide ce que je fais mais bon ça va t'éviter de chercher pendant 3jours pour rien ! Je te met le code :) Mais sâche que ce code vient d' ici (si tu peux laisser un petit commentaire pour encourager l'auteur c'est cool ;) )
            Mets ce code dans la page où tu veux cet effet entre les balises <head></head>:





            <script type="text/javascript">
            /*******************
            * infobulles
            * Ben, 23/07/2005
            *******************/


            // espacement entre le curseur et l'infobulle
            cursor_padding = 5;

            // gestion des navigateurs (IE, MOZ, NS)
            nav = navigator.appName;

            ie = document.all;
            ns = document.layers;
            fi = document.getElementById && !document.all;

            if(!ie && !ns && !fi){
                    alert("navigateur "+nav+" incompatible !");     
            }

            if(!ie){
                    document.captureEvents(Event.MOUSEMOVE);       
            }

            document.onmousemove = get_mouse;

            // recupere les coordonnees de la souris
            // les affecte au style de la div infobulle
            function get_mouse(e){
                    if(ie){
                            x = event.x;
                            y = event.y;
                            window.status = x;
                    }else{
                            x = e.pageX;
                            y = e.pageY;
                    }       
                   
                    bubble = document.getElementById("infobulle");
                    bubble.style.left = x + cursor_padding;
                    bubble.style.top = y + cursor_padding;
                   
            }


            // affiche la bubble
            function see_bubble(text){
                    bubble.style.visibility = "visible";
                    bubble.style.display = "block";
                   
                    // bubble.innerHTML = text;
                    // déconseillé pas aux normes
                   
                    longueur_bubble = bubble.firstChild.length;
                    bubble.firstChild.replaceData(0, longueur_bubble, text);
            }

            // cache la bubble
            function kill_bubble(){
                    bubble.style.visibility = "hidden";
                    bubble.style.display = "none";
            }
            </script>


            Mets ceci dans ton Css (ça concerne l'apparence de l'infobulle ;) tu peux là changer à ta guise !):
            #infobulle{
                    position: absolute;     
                    visibility : hidden;
                    border: 1px solid #CCCCCC;
                    padding: 10px;
                    font-family: Verdana, Arial;
                    font-size: 0.7em;
                    background-color: Yellow;


            Met ce code dans la page où tu as le loooong code et mets le entre les balises <body></body>
            <div id="infobulle">bubble</div>


            Et voici comment tu devras créer tous les texte dont tu va avoir une légende :
            <div><p>Blalabalalaablalalablala
            <couleur nom="rose"><a href="#" onmouseover="javascript:see_bubble('ICI LE TEXTE EXPLICATIF !');" onmouseout="javascript:kill_bubble();">ICI LE TEXTE DONC TU VEUX LA LEGENDE</a></couleur>
            </div>


            Le texte affiché en rose est comme tu as pu deviner le modèle d'un texte légendé :) ! Donc à chaque fois que tu auras besoin de créer un texte légendé tu reprendra ce model et tu remplacera les texte écris en majuscules par le tiens :p !
            Une derniere chose ! Pour que ça marche il est impératif que tu es ce codes sur la page concernée donc si tu utilises cette méthode sur plusieur pages, n'oublie pas de copier coller le lien :)


            Voilà j'espère t'avoir aider sinon c'est une demi heure de perdu pour moi ^^"
            Dis nous si c'est ça ton problème sinon j'aissaierai de t'aider encore :)

            edit : BOn la colorisation du texte en rose ne marche pas donc ne recopies pas les balises color=rose :p
            • Partager sur Facebook
            • Partager sur Twitter
              4 septembre 2006 à 8:59:56

              Merci beaucoup anacondange, je vais tester ça de suite :)
              Ne tinkiète pas, je connais ;)

              EDIT

              Merci beaucoup, ça marche ;)
              :)
              • Partager sur Facebook
              • Partager sur Twitter

              Une fausse popup

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown