mutv/cursor.html at master · muditvij/mutv · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CursorMovement Tracker</title>
</head>
<script>
function mudi(x){
a= x.clientX
b=x.clientY
document.getElementById("coord").innerHTML='Your co-ordinates are (x,y) '+"("+a+","+b+")"
document.getElementById("pointer").style.left = (a+10) + 'px';
document.getElementById("pointer").style.top = (b+10) + 'px';
document.getElementById("pointer").style.display = "block"
}
</script>
<style>
    div#mouse{
        width: 800px;
        height: 500px;
        background-color: gray;
        color: white;
    }
    p{position: absolute; top: 24%; left: 22%; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 1cm;}

    div#pointer{display: none;width: 60px; height: 20px; background-color: black; color: white; text-align: center; position: absolute; left: 00px; top:00px;}
</style>
<body>
    <div id="mouse" onmousemove="mudi(event)"><p>Hover Me</p></div>
    <div id="coord" ></div>
    <div id="pointer">MWT</div>
</body>
</html>