Pb récupération position curseur

Signaler
Messages postés
39
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
13 octobre 2013
-
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007
-
Bonjour
Je voudrais soumettre ce problème à votre sagacité.
Sur une page destinée à un fichier d'aide au format chm, j'affiche une image dans une bulle
Mais il faut que l'image se mette à gauche ou à droite du curseur selon la position de celui-ci
sinon ça dépasse de la page.
Avant l'abscisse 500 je mets à droite et inversement
Voici le script ( il y a de la récup un peu partout sur le net !! )
<SCRIPT
LANGUAGE"JavaScript" type"text/javascript">
function
GetId(id)
{
return
document.getElementById(id);
}
var
i= false ;
// La variable i nous dit si la bulle est visible ou non

function
moveG(e) {
//Image ? gauche du curseur

if
(
i) {
// Si la bulle est visible, on calcul en temps reel sa position ideale

if
(navigator.appName! = "Microsoft Internet Explorer" ) {
// Si on est pas sous IE

GetId("curseur").style.left = e .pageX+10;
GetId("curseur").style.top = e.pageY+10;
}
else
{
GetId( "curseur" ).style.left = window .event.x-130;
GetId("curseur").style.top = window.event.y+10+document.body.scrollTop;
// Sous IE lors du scroll la position reste bonne !

}
}
}

function
moveD(e) {
//Image ? droite du curseur

if
(
i) {
// Si la bulle est visible, on calcul en temps reel sa position ideale

if
(navigator.appName!= "Microsoft Internet Explorer" ) {
// Si on est pas sous IE

GetId ("curseur").style.left =e.pageX+10;
GetId("curseur").style.top= e .pageY+10;
}
else
{
GetId( "curseur" ).style.left =window.event.x+10;
GetId("curseur").style.top= window .event.y+10+document.body.scrollTop;
// Sous IE lors du scroll la position reste bonne !

}
}
}

function
montre(text) {
if(
i == false ) {
GetId( "curseur" ).style.visibility ="visible";
// Si il est cach? on le rend visible.

GetId("curseur").innerHTML= text ;
i =true;
}
}
function
cache() {
if(
i= = true ) {
GetId( "curseur" ).style.visibility ="hidden";
// Si la bulle etait visible on la cache

i= false ;
}
}
</SCRIPT>
</HEAD>

<SCRIPT LANGUAGE ="JavaScript">
function
position(e) {
//Pour r?cup?rer la position du curseur

var
x= event .x+document.body.scrollLeft;
var
y =event.y+document.body.scrollTop;
window.status= "Souris x:" + x +" | y:"+y;
}
document.onmousemove =position;

if(
x>500) {
document.onmousemove= moveG ;
}
else
{
document.onmousemove =moveD;
}
</SCRIPT>

C'est au niveau de la condiftion "if x>500" que ça ne fonctionne pas
ERREUR : x est indéfini
La bulle s'affiche toujours en haut et à gauche de la page
Quelqu'un a t'il une idée sur la question ?
D'avance merci.
jlfcdvg

9 réponses

Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




x étant déclarée à l'intérieur de la fonction position, c'est une variable locale( connue uniquement de la fonction position, et redéclarée à chaque appel).
Solution :

var x;
function position(e){
x=event.x+document.body.scrollLeft;
etc ...

comme tu avais fait pour i
(idem, évidemment pour y)

Cordialement
Roro webDev
Messages postés
39
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
13 octobre 2013

Bonjour
Merci pour la réponse
Je n'ai plus d'erreur mais la vignette reste à droite même si le curseur est >500,
comme si la condition if (x>500) ... etc n'était pas prise en compte
jlfcdvg
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




Il se trouve que tu as deux fois document.onmousemove sur ta page : c'est une de trop. Voir attachEvent ici :
http://www.aidejavascript.com/article143.html

Cordialement
Roro webDev
Messages postés
39
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
13 octobre 2013

Merci de te pencher sur mon problème
J'ai essayé AttactEvent mais ça fait la même chose
Voici mon code modifié

<SCRIPT
LANGUAGE"JavaScript" type"text/javascript">
functionGetId
(id
)
{

returndocument
.getElementById
(id
);
}

vari
= false ;
// La variable i nous dit si la bulle est visible ou non

functionmoveG
(e
) {
//Image ? gauche du curseur

if(i
) {
// Si la bulle est visible, on calcul en temps reel sa position ideale

if
(navigator
.appName
! = "Microsoft Internet Explorer"
) {
// Si on est pas sous IE
GetId
("curseur"
).style
.left
= e
.pageX
+10;
GetId
("curseur"
).style
.top
= e
.pageY
+
10;
}

else {
GetId
( "curseur"
).style
.left
= window
.event
.x
-130;
GetId
("curseur"
).style
.top
= window
.event
.y
+10
+document
.body
.scrollTop
;
// Sous IE lors du scroll la position reste bonne !
}
}
}

functionmoveD
(e
) {
//Image ? droite du curseur

if(i
) {
// Si la bulle est visible, on calcul en temps reel sa position ideale

if
(navigator
.appName
!= "Microsoft Internet Explorer"
) {
// Si on est pas sous IE
GetId
("curseur"
).style
.left
=e
.pageX
+10;
GetId
("curseur"
).style
.top
= e
.pageY
+
10;
}

else {
GetId
( "curseur"
).style
.left
=window
.event
.x
+10;
GetId
("curseur"
).style
.top
= window
.event
.y
+10
+document
.body
.scrollTop
;
// Sous IE lors du scroll la position reste bonne !
}
}
}

functionmontre
(text
) {

if(x
>500) {
document
.onmousemove
=moveG
;
}

else {
document
.onmousemove
= moveD
;
}

if(i
== false ) {
GetId
( "curseur"
).style
.visibility
="visible"
;
// Si il est cach? on le rend visible.
GetId
("curseur"
).innerHTML
= text
;
i
=true;
}
}

functioncache
() {

if(i
= = true ) {
GetId
( "curseur"
).style
.visibility
="hidden"
;
// Si la bulle etait visible on la cache
i
= false ;
}
}

varx
;

vary
;

functionposition
(e
) {
//Pour r?cup?rer la position du curseur
x
=event
.x
+document
.body
.scrollLeft
;
y
=event
.y
+document
.body
.scrollTop
;
}
</SCRIPT>
Merci

jlfcdvg
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




Arrhhh Que voila une affaire bien compliquée !

Beaucoup plus simple :
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
var xMouse, yMouse;

var xSpacer=0;
var ySpacer=10;
function posSouris(e)
       {       xMouse (navigator.appName.substring(0,3) "Mic") ? event.x+document.body.scrollLeft : e.pageX ;       yMouse (navigator.appName.substring(0,3) "Mic") ? event.y+document.body.scrollTop  : e.pageY ;
   
    xSpacer=(xMouse>500)?-150:10;
   
    if (document.getElementById("divMsg"))
        {
        document.getElementById("divMsg").style.top = yMouse + ySpacer;
        document.getElementById("divMsg").style.left = xMouse + xSpacer;
        }
    }

(navigator.appName.substring(0,3) == "Mic")    ? window.document.attachEvent("onmousemove", posSouris) : window.addEventListener("mousemove", posSouris, false);
  

</script>
</head>

</html>

Une fonction, un écouteur, et hop !
A adapter à tes besoins, naturellement

Cordialement
Roro webDev
Messages postés
39
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
13 octobre 2013

Bonjour


Effectivement c'est beaucoup plus simple
Mais comment faire en sorte qu'une image différente apparaisse au lieu du rectangle noir ?
Voici un extrait de ma page






<MAP

NAME= "ListingType">






</MAP>

ALIGN ="CENTER">










C'est la fonction montre() qui permet d'afficher une image dans une popup quand la souris survole un certain endroit de l'écran.

Cordialement
jlfcdvg
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




ben au lieu de:


   (c'est mon rectangle noir!) tu mets ce que tu veux. par exemple :

id="divMsg" style="position:absolute">





Cordialement
Roro webDev
Messages postés
39
Date d'inscription
samedi 19 juillet 2003
Statut
Membre
Dernière intervention
13 octobre 2013

Bonjour
Ca marche !
Mais je ne vois pas comment mettre une image différente selon que la souris survole une zone AREA d'une image ou bien une autre par la méthode onmouseover .
Merci
jlfcdvg
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour











etc ...

(d'autres solutions sont possibles)




Cordialement
Roro webDev