begin process at 2012 02 13 17:55:31
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Tooltip Bubble a la Souris(X,Y)


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Tooltip Bubble a la Souris(X,Y)

samedi 20 juin 2009 à 20:38:44 | Tooltip Bubble a la Souris(X,Y)

CodeIX

Bonjour, je suis en train d'apprendre Javascript, et j'aimerais comprendre ce qui ne marche pas dans mon code.
J'essaie de creer un Tooltip qui se placera a la position de ma souris, et qui fonctionnera sous IE et Firefox. Pour l'instant le mouseover et mouseout fait bien apparaitre et disparaitre le tooltip mais pas a l'endroit(souris x,y) que j'aimerais l'avoir.

Que doit-je modifier?

Merci d'avance!

Voici mon code actuel:
-----
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html  xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        document.onmousemove = getMousePos;
        var posX=0, posY=0;
       
        function getMousePos(e){
            if (document.all) {
                posX=event.offsetX;
                posY=event.offsetY;
            }
            else{
                posX=e.pageX;
                posY=e.pageY;
            }
            /*document.title=""+posX+", "+posY+")";*/
        }
       
        function overBubble(){
            document.getElementById("divbubble").style.top=posX;
            document.getElementById("divbubble").style.left=posY;
            document.getElementById("divbubble").style.display="inline";
        }
       
        function outBubble(){
            document.getElementById("divbubble").style.display="none";
        }
    </script>
</head>
<body>
    <!-- Bubble Div-->
    <div id="divbubble" style="position:absolute; height:50px; width:100px; top:200px; left:200px; background-color:darkred; text-align:center; border: dashed thick red; color: white; padding: 5px; display: none;">
        Ceci est un test!...
    </div>
   
    <!-- Bubble Div(End)-->
   
    <span onmouseover="overBubble()" onmouseout="outBubble()">Testing... Testing... Testing... Testing... Testing... Testing... Testing... </span>
   
   
</body>
</html>
samedi 20 juin 2009 à 20:53:42 | Re : Tooltip Bubble a la Souris(X,Y)

kazma

Administrateur CodeS-SourceS
bonjour
tu oubli de mettre px

document.getElementById("divbubble").style.top=posX+'px';
document.getElementById("divbubble").style.left=posY+'px';
samedi 20 juin 2009 à 21:02:39 | Re : Tooltip Bubble a la Souris(X,Y)

CodeIX

Merci de la reponse.

Je vient de modifier en ajoutant 'px' mais ca ne change rien. Mon div ne se positionne pas a ma souris. :(

samedi 20 juin 2009 à 21:32:45 | Re : Tooltip Bubble a la Souris(X,Y)

kazma

Administrateur CodeS-SourceS
tu inverse les position

document.getElementById("divbubble").style.top=posY+"px";
document.getElementById("divbubble").style.left=posX+"px";
samedi 20 juin 2009 à 21:38:00 | Re : Tooltip Bubble a la Souris(X,Y)

CodeIX

Ah enfin ca fonctionne. ;)

Merci beaucoup, c'etais banal comme probleme.

Sais tu comment je fait pour que, exemple, si je mouseover une ligne de text et que le tooltip apparait, si je me deplace sur cette meme ligne que le tooltip se deplace avec ma souris? Tant et aussi longtemps que je suis sur la ligne qui appel la fonction overBubble()?

dimanche 21 juin 2009 à 18:31:28 | Re : Tooltip Bubble a la Souris(X,Y)

kazma

Administrateur CodeS-SourceS
si tu met l'ensemble dans un div tu te sert du div pour le on mouseout


Cette discussion est classée dans : document, tooltip, posx, posy, testing


Répondre à ce message

Sujets en rapport avec ce message

texte descriptif en mouseover [ par da vince ] Hello,J'ai trouvé un script très bein mais il a deux problèmes:ça marche dans IE7et les textes descriptifs (ds FF) ne disparaissent pas tjs quens on s Problème de Popup-Tooltip [ par whiteange ] Bonjour à tous,Voilà, j'ai un petit problème avec un simili poup-tooltip. Sur une page, l'utilisateur clique sur une image, ceci appel alors une fonct zoom - image ET commentaires [ par Villa Flore ] Bonjour, Je cherche à faire des zooms sur des miniatures. J'utilise le très bon script suivant : ---------------------------------------------------- Comment colorer une ligne d'un tableau avec une case à cocher ? [ par Gwendal3 ] Bonjour, Je cherche à colorer une ligne dont la case à cocher, en début de ligne, est validée. Je ne connais pas grand chose au JS, j'ai recherché da Ajax Probleme de recuperation du caracteres & et de ce qui le suit [ par lesucces ] Bonjour J'ai un formulaire ajax qui me permet de recuperer les données d'un textareas et ça marche correctement sauf que quand je tape le caractere & traitement formulaire [ par tigredelaforet ] Bonjour a tous je suis novice en javascript et j'aurrai besoin d'aide Voila mon probleme (je travail avec un clavier qwerty donc pardonner moi je n' Modif innerHTML d'un div entre 2 XMLHttpRequest synchrones sous IE [ par pacadebord ] Bonjour, Je suis en train de concevoir un outil qui, au clic sur un bouton, parcours les lignes d'un tableau, chaque ligne contenant 3 colonnes (pour Ajout/Suppresion personalisé [ par pc3456 ] bon j'ai un champs où je doit remplir une liste d'information, j'ai décidé d'éviter de laisser à l'utilisateur de remplir un champs en séparant les él problème ecriture liens et fonctions dans un document.write [ par xzonz ] bonjour a touts et tous [^^clinoeil1] mon probleme est le suivant j'ai ce lien qui fonctionne: ')" onMouseOut="disparaitre0( par un checkBox les textBox seront visibles/invisibles... [ par aspkiddy ] Bonjour, j'ai un JavaScript pour un CheckBox. Lorsque l'on coche ce checkBox, certains TextBox seront invisibles les autres seront visible voici mon


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales