Get Mouse Position Using HTML, CSS, And JavaScript

The mouse in the Computer setup is incomplete as far as food is incomplete without salt. Can even imagine the pc setup without a mouse? But we can run the PC using a keyboard shortcut. But it will satisfy us for only 60-70% only. But have ever tried to figure out when we move the pointer and what is its exact position?

See you can check that in the paint application at the bottom left section where it shows you in pixels. But while making this project in the end you’ll find a unique thing that will make it different from others. Using the scripting Languages HTML, CSS, & JavaScript we are going to create a project which will tell us the location of our mouse pointer.

Today We’ll see how to make a Mouse Position Using HTML, CSS, And JavaScript with complete source code so you just easily copy and paste it into your project.

Hello Coders!! I Welcome you to Codewithrandom with this new and fresh blog which helps us to learn how to code the Mouse Position using HTML, CSS & JavaScript. I hope you have got an idea about the project.

HTML Code for Mouse Position

<div id="showCood">
  <div id="posX"></div>
  <div id="posY"></div>
</div>
<div id="jQueryPos"></div>

In this HTML Code, we have defined the structure in which we have used the div function and defined two ids named position x and position y. Now here there is a geometrical logic because a screen is a 2D object and the pointer will tell us the coordinate where it is currently situated. Let us style the CSS code to make it attractive.

Create a Filter Image Gallery using HTML and CSS

CSS Code for Mouse Position

body {
  width: 2000px;
  height: 2000px;
  background: red;
}
#showCood {
  display: none;
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}
#jQueryPos {
  display: none;
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid red;
}

In this CSS Code, we have just set the alignment and the background color. In which we have set the height & width and the display function. So this is basically a Simple CSS code in which we have just set the alignment of the defined tags in the HTML code. Here is the main use of JavaScript because by adding logic to it. It will help our project to display the coordinates of the mouse pointer. Let us code the JavaScript part.

Dark Mode Toggle Button with Html, CSS, and JavaScript in just 2 minutes

JavaScript Code for Mouse Position

function getMousePos(evt) {
  var doc = document.documentElement || document.body;
  var pos = {
    x: evt ? evt.pageX : window.event.clientX + doc.scrollLeft - doc.clientLeft,
    y: evt ? evt.pageY : window.event.clientY + doc.scrollTop - doc.clientTop
  };
  return pos;
}
document.onmousemove = moveMouse;

function moveMouse(evt) {
  var pos = getMousePos(evt),
    cood = document.getElementById("showCood");
  cood.style.display = "block";
  cood.style.left = pos.x + 50 + "px";
  cood.style.top = pos.y + 50 + "px";
  document.getElementById("posX").innerHTML = "X: " + pos.x;
  document.getElementById("posY").innerHTML = "Y: " + pos.y;
}

$(document).mousemove(function(e) {
  $("#jQueryPos").text(e.pageX + "," + e.pageY).show().css({
    left: e.pageX - 50,
    top: e.pageY - 50
  });
});

Build a Multi-Step Form Using HTML, CSS &JavaScript

In this JavaScript part at the opening the ids which were defined in the HTML Code here it is called and given a variable as var so that later it can be called in the script. Then that id is defined under document.getElementById, and in the last, we have defined that the position will be displayed at the top of the cursor and the bottom of the cursor and it will be in the format of (x, y) px. Let us see the final output of the project.

Final Output Of Mouse Position Using HTML, CSS, And JavaScript

We have successfully created our Mouse Position Using HTML, CSS, And JavaScript | JavaScript Get Mouse Position. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Happy Learning!!!

Written By – Harsh Sawant

Code By – @harshh9