As you can see above, a small box has been created on top of a web page. That box contains space to display the values of the X and Y-axis.
When you move the mouse over the webpage or change the position of the mouse, its value will be displayed in pixels in the box. The background color of the box is white and I have used a shadow all around to enhance the beauty.
Step 1: Make a box on the webpage
I have created a box on the web page using the following codes. In which the value of Mouse Position can be seen.
I designed the webpage using the following codes. Here I have used blue color in the background of the webpage.
The following codes have been used to design the box at the top of that page. The width of this box is 70vmin and the background color is white. Shadows have been used around the box to enhance the beauty.
➤ The mousemove event is fired at an element when a pointing device is moved. The e.client property returns the coordinate of the mouse pointer when a mouse event was triggered.
➤ The change of mouse along the x-axis is collected. Then we store that value in ‘xPos’. In the same way, we have saved the mouse change along the y axis in ‘yPos’.
➤ Then using ‘innerHTML’ we have arranged to display that value in the box in the webpage. ‘innerHTML’ allows reading and replacing everything within a given DOM element.
Step 3: Design the value of Mouse Position
Now using some amount of CSS I have designed the information in the box. This means that the following codes have been used to design some of the values that can be found in the box.