[JS] Trouver la position du curseur sur une image

Trouver la position du curseur sur une image [JS] - HTML/CSS - Programmation

Marsh Posté le 04-10-2007 à 10:30:40    

Bonjour à tous,
 
Je suis débutant en JS et j'ai une fonction à programmer qui me pose problème. Je dois pouvoir récupérer la position du curseur lors d'un clic sur l'image mais pas en fonction du bord haut/gauche de la page mais en fonction du bord haut/gauche de l'image : est-ce possible ?
Si oui, pourriez-vous me mettre sur la voie ?
 
Merci d'avance :jap:

Reply

Marsh Posté le 04-10-2007 à 10:30:40   

Reply

Marsh Posté le 16-10-2007 à 12:40:43    

Voici ce que j'ai fait : ça fonctionne sous IE, mais pas sous FF :/
 

Code :
  1. <script type="text/javascript">
  2. var cpt=1;
  3. var bool=false;
  4. var isIE = false;
  6. //on détermine le navigateur
  7. if (navigator.appName == "Microsoft Internet Explorer" ) {
  8.  isIE = true;
  9. }
  11. function coords()
  12. {
  13.  //On gère la croix courante
  14.  if (cpt<7)
  15.  {
  16.   bool=true;
  17.  }
  18.  else
  19.  {
  20.   bool=false;
  21.   alert("Vous avez déjà coché 7 erreurs" );
  22.  }
  23.  cpt++;
  26.  if (bool)
  27.  {
  28.   var div1=document.getElementById("croix1"+cpt);
  29.   var div2=document.getElementById("croix2"+cpt);
  30.   var A=document.getElementById("A" );
  31.   div1.style.visibility="visible";
  32.   div2.style.visibility="visible";
  33.   if (isIE)
  34.   {
  35.    div1.style.left=window.event.offsetX-5;
  36.    div1.style.top=window.event.offsetY-5;
  37.    div2.style.left=window.event.offsetX-5;
  38.    div2.style.top=window.event.offsetY-5;
  39.   }
  40.   else
  41.   {
  42.    alert(A.offsetTop);
  43.    /*div1.style.left= A.offsetLeft - 5;
  44.    div1.style.top= A.offsetTop - 5;
  45.    div2.style.left= A.offsetLeft - 5;
  46.    div2.style.top= A.offsetTop - 5;*/
  47.   }
  48.  }
  49. }
  50. </script>
  52. <div style="position: relative; width: 300px; height:300px;">
  53. <img src="img/1A.jpg" style="position: absolute; left:0; top:0;" onclick="coords(this)" id="A"/>
  54. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix11" />
  55. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix12" />
  56. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix13" />
  57. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix14" />
  58. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix15" />
  59. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix16" />
  60. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix17" />
  61. </div>
  62. <div style="position: relative; width: 300px; height:300px;">
  63. <img src="img/1B.jpg" style="position: absolute; left:0; top:0;" onclick="coords(this)" id="B"/>
  64. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix21" />
  65. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix22" />
  66. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix23" />
  67. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix24" />
  68. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix25" />
  69. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix26" />
  70. <img src="img/croix.gif" style="position: absolute; left:10px; top:10px; width: 10px; height: 10px; visibility:hidden;" id="croix27" />
  71. </div>


 
PS: c'est un jeu des 7 erreurs et je voudrais que les croix se placent sur les endroits cliqués sur l'image.

Reply

Marsh Posté le 17-10-2007 à 04:08:49    

les evenements ne sont pas gérés de la meme facon sur ie et ff
 
enleve le this ici
 
onclick="coords(this)"
 
dans ta fonction fous un nom pour ton objet event, du genre
function coords(evt)
 
ensuite tu ourras appeler tes evenemens dans firefox avec evt.offsetSkeTuVeux
 
je suis aps trop sur de moi par contre :D
verifie sur la doc de mozilla


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed