Comment trouver la position de la souris par rapport à un élément en jQuery
Vous pouvez utiliser event.pageX et event.pageY de jQuery en combinaison avec la méthode offset() de jQuery pour obtenir la position de la souris par rapport à un élément. Voici un exemple:
Code source :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trouver la position de la souris par rapport à un élément</title>
<style type="text/css">
#myDiv{
border: 1px solid black;
background: gray;
width:300px;
height:200px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myDiv").mousemove(function(event){
var X = event.pageX - $(this).offset().left;
var Y = event.pageY - $(this).offset().top;
$(".cordn").text("(" + X + "," + Y + ")");
});
});
</script>
</head>
<body>
<div id="myDiv"></div>
<p>Les coordonnées de la souris par rapport au bloc DIV sont: <b class="cordn"></b></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trouver la position de la souris par rapport à un élément</title>
<style type="text/css">
#myDiv{
border: 1px solid black;
background: gray;
width:300px;
height:200px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myDiv").mousemove(function(event){
var X = event.pageX - $(this).offset().left;
var Y = event.pageY - $(this).offset().top;
$(".cordn").text("(" + X + "," + Y + ")");
});
});
</script>
</head>
<body>
<div id="myDiv"></div>
<p>Les coordonnées de la souris par rapport au bloc DIV sont: <b class="cordn"></b></p>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trouver la position de la souris par rapport à un élément</title> <style type="text/css"> #myDiv{ border: 1px solid black; background: gray; width:300px; height:200px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#myDiv").mousemove(function(event){ var X = event.pageX - $(this).offset().left; var Y = event.pageY - $(this).offset().top; $(".cordn").text("(" + X + "," + Y + ")"); }); }); </script> </head> <body> <div id="myDiv"></div> <p>Les coordonnées de la souris par rapport au bloc DIV sont: <b class="cordn"></b></p> </body> </html>
Résultat |
---|
Les coordonnées de la souris par rapport au bloc DIV sont: |
Merci