IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[Js] Bouger un calque par rapport à la position de la souris


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de hedgehog
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    295
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 295
    Par défaut [Js] Bouger un calque par rapport à la position de la souris
    Bonjour à tous,

    J'ai développé un script JavaScript dans une page XSL me permettant de déplacer un calque en fonction de la position de la souris. Mon script marche trés bien sous FireFox mais pas sous IE. Sous IE, mon calque reste dans un coin et ne prend pas en compte le déplacement de la souris.

    Voici mon script Js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <script language="JavaScript">
    <![CDATA[
     
    // Fonction de création des listeners de position de la souris et affichage du calque
    function montreDesc() {
    	if(document.all) {
    		window.attachEvent('onmousemove', mouvement)
    	} else
    		window.addEventListener('mousemove', mouvement , false)
    	document.getElementById('calqueDesc').style.visibility = "visible";
    }
     
    // Fonction effectuant le mouvement du calque par rapport à la souris
    function mouvement(e) {
    	alert("Entrée");
    	x = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
    	y = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
    	alert("Passage");
    	document.getElementById('calqueDesc').style.left = x + 10 + 'px';
    	document.getElementById('calqueDesc').style.top = y + 20 + 'px';
    }
     
    // Fonction de destruction des listeners de position de la souris et masquage du calque
    function cacheDesc() {
    	if(document.all)
    		window.detachEvent('onmousemove', mouvement);
    	else
    		window.removeEventListener('mousemove', mouvement , false);
    	document.getElementById('calqueDesc').style.visibility = "hidden";
    }
     
    ]]>
    </script>
    Pour informations, les alert("Entrée") et alert("Passage") ne s'affichent pas.

    et la partie l'utilisant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <td class="lien" onmouseout="this.className='tdHors'; cacheDesc()">
    	<xsl:attribute name="onmouseover">
    		this.className='tdDessus'; document.getElementById('calqueDesc').innerHTML = '<xsl:value-of select="@description" />'; montreDesc()
    	</xsl:attribute>
    	<a target="_blank">
    		<xsl:attribute name="href">
    			<xsl:value-of select="@url" />
    		</xsl:attribute>
    		<xsl:value-of select="@titre" />
    	</a>
    </td>
    Pourriez-vous me donner un petit coup de main ?

    Merci d'avance

  2. #2
    Membre Expert
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Par défaut
    as tu un attribut style dans ton calque 'calqueDesc'?

  3. #3
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.onmousemove = mouvement;
    ?

    A+

  4. #4
    Membre éclairé Avatar de hedgehog
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    295
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 295
    Par défaut
    Matthieu2000 :

    Oui j'ai un attribut style dans mon calque : E.Bzz :

    J'ai essayé mais même probléme.

  5. #5
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    As-tu essayé tout bêtement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.addEventListener('mousemove', mouvement , true);
    ?

    A+

  6. #6
    Membre éclairé Avatar de hedgehog
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    295
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 295
    Par défaut
    Je viens d'essayer toujours pareil.

  7. #7
    Membre Expert
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Par défaut
    les objects que tu traites ne gèrent pas ces événements
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function montreDesc(me) {
     
    	if(document.all) {
    		if(me)
    		me.attachEvent('onmousemove', mouvement)
    	} else
    		window.document.addEventListener('mousemove', mouvement , false)
    	document.getElementById('calqueDesc').style.visibility = "visible";
    }
     
    ...
    <xsl:attribute name="onmouseover">
    		this.className='tdDessus'; document.getElementById('calqueDesc').innerHTML = '<xsl:value-of select="@description" />'; montreDesc(this)
    	</xsl:attribute>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Translation horizontale par rapport à la position d'une autre div
    Par lionel12 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 19/06/2012, 18h36
  2. Réponses: 5
    Dernier message: 24/02/2011, 13h22
  3. Réponses: 27
    Dernier message: 28/03/2007, 16h09
  4. Réponses: 4
    Dernier message: 02/01/2007, 13h35
  5. replacement d'un div par rapport au coordonnée de la souris
    Par gunth dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 15/06/2006, 08h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo