Accueil > Forum > > > > Pb récupération position curseur
 Pb récupération position curseur
mercredi 11 octobre 2006 à 08:02:30 |
Pb récupération position curseur
jlfcdvg
|
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">
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(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;
}
}
</SCRIPT>
</HEAD>
<BODY BACKGROUND="wood.jpg" BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK=#800080 ALINK=#FF0000>
<SCRIPT LANGUAGE="JavaScript">
functionposition(e) { //Pour r?cup?rer la position du curseur
varx=event.x+document.body.scrollLeft;
vary=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 |
|
mercredi 11 octobre 2006 à 08:53:13 |
Re : Pb récupération position curseur
roro06
|
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
|
|
mercredi 11 octobre 2006 à 09:19:34 |
Re : Pb récupération position curseur
jlfcdvg
|
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
|
|
mercredi 11 octobre 2006 à 09:38:50 |
Re : Pb récupération position curseur
roro06
|
Bonjour
Il se trouve que tu as deux fois document.onmousemove sur ta page : c'est une de trop. Voir attachEvent ici :
 [ Lien ]
Cordialement
Roro webDev
|
|
mercredi 11 octobre 2006 à 12:09:21 |
Re : Pb récupération position curseur
jlfcdvg
|
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 |
|
mercredi 11 octobre 2006 à 12:49:55 |
Re : Pb récupération position curseur
roro06
|
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>
<body>
<div id="divMsg" style="position:absolute; width:150px; height:25px; background-color:black"></div>
</body>
</html>
Une fonction, un écouteur, et hop !
A adapter à tes besoins, naturellement
Cordialement
Roro webDev
|
|
mercredi 11 octobre 2006 à 17:17:37 |
Re : Pb récupération position curseur
jlfcdvg
|
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">
<AREA SHAPE="rect" COORDS="9,16,99,31" OnClick='JavaScript:affichepopup("Rappeldutrieffectu? \ngr?ceaumenucontextuel")'HREF="#">
<AREA SHAPE="rect" COORDS="9,46,45,261"ALT="Aper?u de l'?cran obtenu en cliquant sur le n° de la fiche" onmouseover="montre('<IMG SRC=ModificationVignette.jpg BORDER=1 WIDTH=100 HEIGH=75>');" onmouseout="cache();" HREF="modification.html">
<AREA SHAPE="rect" COORDS="53,48,156,264" ALT="Aper?u de l'?cran obtenu en cliquant sur le nom de la fiche" onmouseover="montre('<IMG SRC=fiche.jpg BORDER=1 WIDTH=100 HEIGH=75>');" onmouseout="cache();" HREF="imprimefiche.html">
<AREA SHAPE="rect" COORDS="163,48,416,264" ONCLICK='JavaSript:affichepopup("Surtousleschampsdeceformulaire \nilyapossibilit? detricroissant \noud?croissantparmenucontextuel.\nCliquezsurlen° pourmodifierlafiche, \nsurlenompourl?imprimer \nousurlavignettepourvisualiserune ?tiquette")' HREF="#">
<AREA SHAPE="rect" COORDS="435,47,465,264" ALT="Aper?u de l'?cran obtenu en cliquant sur la vignette" onmouseover="montre('<IMG SRC=ZoomVignette.jpg BORDER=1 WIDTH=100 HEIGH=100>');" onmouseout="cache();" HREF="zoom.html">
<AREA SHAPE="rect" COORDS="9,268,31,292" OnClick='JavaScript:affichepopup("Fermer \nceformulaire")'HREF="#">
</MAP>
<DIV ALIGN="CENTER">
<IMG SRC="ListingNom.jpg" BORDER=0 WIDTH=485 HEIGHT=305 ALT="" USEMAP="#ListingType">
</DIV>
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
|
|
jeudi 12 octobre 2006 à 09:42:58 |
Re : Pb récupération position curseur
roro06
|
Bonjour
ben au lieu de:
<div id="divMsg" style="position:absolute; width:150px; height:25px; background-color:black"></div> (c'est mon rectangle noir!) tu mets ce que tu veux. par exemple :
<div id="divMsg" style="position:absolute"><img src="blablabla..."></div>
Cordialement
Roro webDev
|
|
jeudi 12 octobre 2006 à 12:17:14 |
Re : Pb récupération position curseur
jlfcdvg
|
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
|
|
jeudi 12 octobre 2006 à 12:55:17 |
Re : Pb récupération position curseur
roro06
|
Bonjour
<div id="divMsg" style="position:absolute"><img src="blablabla..." id="monImage"></div>
<area ... onmouseover="document.getElementById('monImage').src='image1.jpg'">
<area ... onmouseover="document.getElementById('monImage').src='image2.jpg'">
<area ... onmouseover="document.getElementById('monImage').src='image3.jpg'">
etc ...
(d'autres solutions sont possibles)
Cordialement
Roro webDev
|
|
Cette discussion est classée dans : style, curseur, position, document, getid
 Répondre à ce message
 Sujets en rapport avec ce message
Liste d'infobulles [ par pierrer12 ]
Salut ... Je suis nouveau sur ce site, et je poste pour demander de l'aide pour la première fois . En fait en partant de la source de Mobman02 sur les
Probleme info bulle!!! [ par sabou94 ]
Voilà mon probleme : J'ai un tableau où dans les differentes cases et lignes de mon tableau je récupere des données d'une base de données sybase. L'un
info bulle js [ par misskis ]
Bonjour,J'ai récupéré un script "merci TeDeum" pour créer des info bulle en jsTrés sympa mais j'ai un bug sur ie.Le script :&l
Connaître la position du curseur à un temps donné [ par jdmcreator ]
Bonjour,J'ai une question tout bête que je ne suis pas capable de régler. Je voudrais avoir la position du curseur à chaque seconde. J'ai tenté d'util
Pb Affichage infobulle avec Image sous IE [ par ragmo ]
Bonjour, J'ai besoin d'aide concernant l'affichage d'une infobulle contenant une image qui s'affiche au survole d'une vignette. C
Problème avec la position du curseur sur IE [ par Aeres ]
Bonjour j'ai un petit soucis sous IE [^^sad2] je voudrais faire apparaitre une bulle d'infos à la position de la souris mais event.x semble dépendre d
Ajax et firefox [ par Micke7 ]
Bonjour, Le code ci-dessous ne fonctionne pas sous firefox et moyennement sous Opera. Il arrive même qu'il buggue sous IE. J'aimerais donc savoir si
function met [ par theseif ]
Bonjour à tous, dans mes formulaires j'utilise la fonction met pour ouvir ou fermer des tableaux:functionmet1<font color="#008000"
Internet Explorer et object [ par bond_never_die ]
Bonjour à tous. Voilà, j'ai un petit script qui permet d'afficher dynamiquement une zone d'affichage au dessus de ma page. Problème : sous Internet Ex
script incompatible... ? [ par zen69 ]
Bonjour tlm!J'ai encore un probleme de compatibilité avec des scripts ....Prenons ces deux fontions...function useShipInfo () { do
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|